2009scape-website/services/m=devblog/view_postdd84.html
2020-11-24 12:27:36 -05:00

250 lines
17 KiB
HTML
Raw Blame History

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<!-- Mirrored from services/m=devblog/view_post.ws?post_id=10&page=7 by HTTrack Website Copier/3.x [XR&CO'2010], Sun, 18 Jul 2010 10:52:25 GMT -->
<!-- Added by HTTrack --><meta http-equiv="content-type" content="text/html;charset=ISO-8859-1"><!-- /Added by HTTrack -->
<head>
<link rel="icon" type="image/vnd.microsoft.icon" href="../../site/favicon.ico">
<link rel="SHORTCUT ICON" href="../../site/favicon.ico">
<link rel="apple-touch-icon" href="../../site/img/mobile.png">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Language" content="
en,
English
">
<meta name="keywords" content="RuneScape Developers' Blogs">
<meta name="description" content="RuneScape Developers' Blogs - Mod Joe goes through the process of updating Zanaris and fairy NPCs.">
<meta name="title" content="Fairy Area Improvement - Concept">
<title>Fairy Area Improvement - Concept</title>
<style type="text/css">/*\*/@import url(../../site/css/global-34.css);/**/</style>
<script type="text/javascript" src="../../www.jagex.com/js/jquery/jquery_1_3_2.js"></script>
<script type="text/javascript">
$(function(){
$("#play, #playExisting, #playBannerNoad").each(function(){ this.href += "?j=1"; })
})
</script>
<link rel="stylesheet" type="text/css" href="../../site/css/kbase-6.css" media="all">
<link rel="stylesheet" type="text/css" href="../../site/css/devblog-2.css" media="all">
<link rel="stylesheet" type="text/css" href="../../site/css/sifr-0.css" media="all">
<script type="text/javascript" src="../../site/css/sifr_core-0.js"></script>
<script type="text/javascript">
var Trajan_Pro_Bold = { src: 'http://site/img/sifr/Trajan_Pro_Bold.swf' };
sIFR.activate(Trajan_Pro_Bold);
sIFR.replace(Trajan_Pro_Bold, {
selector: 'h2',
css: '.sIFR-root { font-weight: bold; font-size: 23px; text-align: center; opacity: 0.95; leading: -1; color: #411f13; }'
+ ', .sIFR-root a { color: #411f13; }'
+ ', .sIFR-root a:hover { color: #411f13; }',
wmode: 'transparent'
});
</script>
</head>
<body id="nav" class="bodyBackground">
<a name="top"></a>
<div class="bodyBackgroundHead">
<div id="menubox">
<ul id="menus">
<li class="top"><a href="../../site/title.html" id="home" class="tl"><span class="ts">Home</span></a></li>
<li class="top"><a id="play" class="tl" href="https://github.com/2009scape/2009Scape/releases/latest/download/2009Scape.jar"
onclick="try{pageTracker._trackPageview('/play_game/menu/top')}catch(x){}; try{_pageTracker._trackPageview('/play_game/menu/top')}catch(x){}"
><span class="ts">Play Now</span><!--[if gt IE 6]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="../../secure.runescape.com/m%3dcreate/index.html" class="fly"><span>New Users</span></a></li>
<li><a href="https://github.com/2009scape/2009Scape/releases/latest/download/2009Scape.jar" id="playExisting"
onclick="try{pageTracker._trackPageview('/play_game/menu/existing')}catch(x){}; try{_pageTracker._trackPageview('/play_game/menu/existing')}catch(x){}"
class="fly"><span>Existing Users</span></a></li>
<li><a href="../../site/options.html" class="fly"><span>Java Options</span></a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="top"><a id="account" class="tl" href="../../site/account_management.html"><span class="ts">Account</span><!--[if gt IE 6]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="../../secure.runescape.com/m%3dweblogin/members/members.html" class="fly"><span>Upgrade Your Account</span></a></li>
<li><a href="../../secure.runescape.com/m%3dcreate/index-2.html" class="fly"><span>Create New Account</span></a></li>
<li><a href="../../site/account_management.html" class="fly"><span>Account Management</span></a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="top"><a id="guide" class="tl" href="../../site/kbase/guid/manual.html"><span class="ts">Game Guide</span><!--[if gt IE 6]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<!--[if lte IE 6]><iframe src=""></iframe><![endif]-->
<ul>
<li><a href="../../site/kbase/guid/manual.html" class="fly"><span>Manual</span></a></li>
<li><a href="../../secure.runescape.com/m%3dweblogin/loginform802b.html" class="fly"><span>QuestHelp</span></a></li>
<li><a href="../m%3ditemdb_rs/frontpage.html" class="fly"><span>Grand Exchange</span></a></li>
<li><a href="../../site/kbase/guid/rules_of_conduct.html" class="fly"><span>Rules</span></a></li>
<li><a href="../../site/kbase/guid/lore.html" class="fly"><span>Lores</span></a></li>
<li><a href="../../site/splash.html" class="fly"><span>What is RuneScape?</span></a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="top"><a id="community" class="tl" href="../m%3dforum/forums.html"><span class="ts">Community</span><!--[if gt IE 6]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<!--[if lte IE 6]><iframe src=""></iframe><![endif]-->
<ul>
<li><a href="../m%3dforum/forums.html" class="fly"><span>Forums</span></a></li>
<li><a href="../m%3dhiscore/hiscores.html" class="fly"><span>Hiscores</span></a></li>
<li><a href="../../site/kbase/guid/Player_Submissions.html" class="fly"><span>Player Submissions</span></a></li>
<li><a href="../m%3dadventurers-log/index.html" class="fly"><span>Adventurer's Log</span></a></li>
<li><a href="../m%3dpoll/index.html" class="fly"><span>Polls</span></a></li>
<li><a href="../../site/kbase/guid/Downloads_and_Wallpapers.html" class="fly"><span>Downloads &amp; Wallpapers</span></a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="top"><a id="help" class="tl" href="../../site/kbase/guid/Customer_Support.html"><span class="ts">Help</span><!--[if gt IE 6]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<!--[if lte IE 6]><iframe src=""></iframe><![endif]-->
<ul>
<li><a href="../../site/kbase/guid/Customer_Support.html" class="fly"><span>Customer Support</span></a></li>
<li><a href="../../site/loginapplet/loginappletb4b5.html?mod=www&amp;dest=loginapplet/loginapplet.ws?mod=accountappeal&amp;dest=passwordchoice.ws" class="fly"><span>Password Recovery</span></a></li>
<li><a href="../../site/loginapplet/loginappletef7e.html?mod=www&amp;dest=loginapplet/loginapplet.ws?mod=accountappeal&amp;dest=lockchoice.ws" class="fly"><span>Locked Account Recovery</span></a></li>
<li><a href="../../secure.runescape.com/m%3dweblogin/loginform14d4.html?mod=offence-appeal&amp;dest=index.ws" class="fly"><span>Appeal Bans &amp; Mutes</span></a></li>
<li><a href="../m%3dbugtracker_v4/index.html" class="fly"><span>Submit a Bug Report</span></a></li>
<li><a href="../../site/parents.html" class="fly"><span>Parents' Guide</span></a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="top"><a href="../../secure.runescape.com/m%3dweblogin/loginform53bb.html?mod=www&amp;ssl=0&amp;dest=index.ws" id="login" class="tl"><span class="ts">Log In</span></a></li>
</ul>
<br class="clear" />
</div>
<div id="bannerNoad">
<a href="https://github.com/2009scape/2009Scape/releases/latest/download/2009Scape.jar" class="HoverImg" id="playBannerNoad"><img src="../../site/img/main/skins/default/playnowc20a.png?12" alt="Play Now" /></a>
</div>
<div id="scroll">
<div id="head"><div id="headBg">
<div id="langAndLogin">
<div id="lang">
<a href="../../site/title.html"><img alt="English" title="English" src="../../site/img/main/layout/en.gif" /></a>
<a href="../../site/l%3d1/title.html"><img alt="Deutsch" title="Deutsch" src="../../site/img/main/layout/de.gif" /></a>
<a href="../../site/l%3d2/title.html"><img alt="Fran&ccedil;ais" title="Fran&ccedil;ais" src="../../site/img/main/layout/fr.gif" /></a>
<a href="../../site/l%3d3/title.html"><img alt="Portugu&ecirc;s (BR)" title="Portugu&ecirc;s (BR)" src="../../site/img/main/layout/br.gif" /></a>
</div>
</div>
</div></div>
<div class="navigation">
<div class="location">
<b>Location: </b> <a href="../../site/title.html">Home</a> &gt;
<a href="index235c.html?page=7"><span>Developer Blogs</span></a> <span class="divider">&gt;</span>
<span><span>Fairy Area Improvement: Concept</span></span>
</div>
</div>
<div id="content"> <div id="article">
<div class="sectionHeader">
<div class="left">
<div class="right">
<h1 class="plaque_medium">
Fairy Area Improvement: Concept
</h1>
</div>
</div>
</div>
<div class="section">
<div class="article">
<div class="topshadow">
<div class="bottombordershad">
<div class="leftshadow">
<div class="rightshadow">
<div class="leftcorner">
<div class="rightcorner">
<div class="bottomleftshad">
<div class="bottomrightshad">
<div id="post">
<div class="devblog">
<div class="devblogHead">
<div class="devblogFoot">
<div id="archives"><a href="index235c.html?page=7">&lt; Back to archive</a></div>
<h2>
Concept
<br/>
by <a href="index71a2.html?author_id=7">Mod<EFBFBD>Joe</a> 17-Apr-2009
</h2>
<div class="content"><p>Hi guys, I<>m <span class="strong">Mod Joe</span>, RuneScape<70>s Art Director, and I<>d like to give a rough overview of one of our graphical improvement projects. This will hopefully give you insight into how we choose projects for improvements and also take you through the different art departments that will then produce the final game assets. In this first part, I<>ll talk about the concept stage. In the second part, we<77>ll go through modelling of game assets, such as creatures and scenery, then, in the third part, we will give you an overview of what it takes to bring things to life through the animation process.</p><p>The art team works very closely with the rest of the content developers, and when I heard that <span class="strong">Mod Ingrid</span> had been given the final part of the Fairy Tale trilogy to start briefing, my initial reaction was that we<77>ve gotta improve that area first. Zanaris itself had already undergone one graphical improvement a few years ago, but I think it<69>s important not to understate how much both the engine and our tools have changed since then. </p><p>Many years ago, when I first started at Jagex, the art team size was only three artists (!) and we did everything (modelling, animation, mapping, etc) ourselves. Now, in 2009, we have a team of sixteen very talented artists who all specialise in one of three areas: 2D concept artwork, 3D modelling or animation. In the first part of this diary, I<>d like to take you through the first stage: the concept stage...</p><p></p></div><div class="hr"></div><h3>Old Zanaris</h3><div class="devblogimagecentre"><div class="imgcentre"><div class="centrecontainer"><div class="topbord"><div class="bottombord"><div class="leftbord"><div class="rightbord"><div class="toplcorn"><div class="toprcorn"><div class="bottomlcorn"><div class="bottomrcorn"><a href="images/fairy_graphics/fairy_comparison.jpg"><img src="images/fairy_graphics/fairy_comparison_thumb.jpg" alt="Zanaris in 2004 and 2006" /></a></div></div></div></div></div></div></div></div><a href="images/fairy_graphics/fairy_comparison.jpg">Zanaris in 2004 and 2006</a></div></div></div><br class="clear" /><div class="content"><p></p><p>Originally, Zanaris was just a standard brown dungeon. I recall we overhauled it to look a little <20>bluer<65> a few years ago, but it never really looked as <20>magical<61> as it could.</p><p>There is also the issue that the fairy race itself could be improved, both in terms of modelling and animation. Back three years ago we had limited time, artists and tools, but now that we have our specialist artists and a much-improved game engine, we have a greater degree of flexibility in how we create the different areas of the game.</p><p>Given that a new quest was to take place in Zanaris, we decided to give the area a total rework, both in terms of the fairy race themselves and their environment. Once we knew this, I spoke to one of our concept artists, <span class="strong">Mod GG</span>, to get some ideas on what we could do.</p><p></p></div><div class="hr"></div><h3>New queen</h3><div class="imgright"><div class="topbord"><div class="bottombord"><div class="leftbord"><div class="rightbord"><div class="toplcorn"><div class="toprcorn"><div class="bottomlcorn"><div class="bottomrcorn"><a href="images/fairy_graphics/fairy_queen.jpg"><img src="images/fairy_graphics/fairy_queen_thumb.jpg" alt="Variations on the new look for fairies" /></a></div></div></div></div></div></div></div></div><a href="images/fairy_graphics/fairy_queen.jpg">Variations on the new look for fairies</a></div><div class="content"><p></p><p>One of our goals in the concept stage is getting the balance right between ideas that are unique, but which are also immediately recognisable for players who are new to the game. When we looked at the original fairies, one of the first issues we had was that they were way too small - you can<61>t see them very well and they don't have enough definition. The first thing that <span class="strong">Mod GG</span> did was to sketch a new fairy character that had a much better silhouette and which would be much more <20>readable<6C> as a fairy.</p><p></p></div><div class="hr"></div><h3>House work</h3><div class="imgright"><div class="topbord"><div class="bottombord"><div class="leftbord"><div class="rightbord"><div class="toplcorn"><div class="toprcorn"><div class="bottomlcorn"><div class="bottomrcorn"><a href="images/fairy_graphics/fairy_houses.jpg"><img src="images/fairy_graphics/fairy_houses_thumb.jpg" alt="Concept art of fairy tree-houses" /></a></div></div></div></div></div></div></div></div><a href="images/fairy_graphics/fairy_houses.jpg">Concept art of fairy tree-houses</a></div><div class="content"><p></p><p>In terms of the fairies' houses we knew that we wanted them to stay pretty tree-based and close to nature. We experimented with a few different ideas and, at one point in the concept stage, we investigated making the fairies more insect-like, with more emphasis on quick-beating wings and fly-like eye clusters instead of the traditional human eyes. This is something that was echoed in the brown, wax-like tree in the image below; as you can see, it<69>s more of a nest than an actual home. Given the types of furniture that would also have to be designed (and given the back-history of the fairy culture), we decided not to go down this route, which is why, in the end, we wanted to go with something relatively traditional.</p><p></p></div><div class="hr"></div><h3>In the mood</h3><div class="imgright"><div class="topbord"><div class="bottombord"><div class="leftbord"><div class="rightbord"><div class="toplcorn"><div class="toprcorn"><div class="bottomlcorn"><div class="bottomrcorn"><a href="images/fairy_graphics/fairy_zanaris.jpg"><img src="images/fairy_graphics/fairy_zanaris_thumb.jpg" alt="'Mood' artwork for the redesigned Zanaris" /></a></div></div></div></div></div></div></div></div><a href="images/fairy_graphics/fairy_zanaris.jpg">'Mood' artwork for the redesigned Zanaris</a></div><div class="content"><p></p><p>I<EFBFBD>ll leave you with our final mood image for Zanaris. As you can see, it's nice, bright and colourful, which we feel is definitely right for the area of game the fairies live in. Tune in next time to see how we approach modelling.</p></div>
<br class="clear" />
<div id="meta">
Project: <a href="indexfc0c.html?project_id=3">Fairy Area Improvement</a><br />
Tags:
<a href="index0726.html?tag_id=38">fairy</a>, <a href="index66d1.html?tag_id=4">graphics</a>, <a href="indexd664.html?tag_id=39">rework</a></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<br class="clear"/>
</div>
<div id="footer">
<div class="contain">
<div class="footerdesc">
This website and its contents are copyright <20> under AGPL<br />
Use of this website is subject to our <a href="../../site/terms/terms.html">Terms &amp; Conditions</a> and <a href="../../site/privacy/privacy.html">Privacy Policy</a>.
</div>
<a class="jagexlink" href="../../www.jagex.com/index.html" target="_blank">
<img src="../../site/img/main/layout/jagexc20a.png?12" alt="Jagex" />
</a>
<br class="clear"/>
</div>
<br class="clear"/>
</div>
</div>
</div>
<script type="text/javascript">
document.write(unescape("%3Cscript src='"+(("https:"==document.location.protocol)?"https://ssl":"http://www")+".google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var _pageTracker=_gat._getTracker("UA-2058817-15");
_pageTracker._setDomainName(".runescape.com");
_pageTracker._trackPageview();
}catch(x){}
</script>
<script type="text/javascript">
try {
var pageTracker=_gat._getTracker("UA-2058817-2");
pageTracker._setDomainName(".runescape.com");
pageTracker._trackPageview();
}catch(x){}
</script>
</body>
<!-- Mirrored from services/m=devblog/view_post.ws?post_id=10&page=7 by HTTrack Website Copier/3.x [XR&CO'2010], Sun, 18 Jul 2010 10:52:26 GMT -->
<!-- Added by HTTrack --><meta http-equiv="content-type" content="text/html;charset=ISO-8859-1"><!-- /Added by HTTrack -->
</html>