Mirrors/2009scape-website
1
0
Fork 0
mirror of https://github.com/2009scape/2009scape.github.io.git synced 2024-11-09 20:42:35 +01:00
Code Issues Projects Releases Wiki Activity
d5f46ad85c
2009scape-website/website-HTML/www.runescape.com/kbase/guid/diary_fairy01.html

526 lines
21 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 www.runescape.com/kbase/guid/diary_fairy01 by HTTrack Website Copier/3.x [XR&CO'2010], Sun, 18 Jul 2010 10:50:17 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="../../favicon.ico">
<link rel="SHORTCUT ICON" href="../../favicon.ico">
<link rel="apple-touch-icon" href="../../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="dev,development,diary,fairy,zanaris,graphics,npc,improvement">
<meta name="description" content="Mod Joe goes through the process of updating the look of Zanaris and fairy NPCs.">
<meta name="title" content="RuneScape - MMORPG - Fairy Graphics: Part 1 - Concept">
<title>RuneScape - MMORPG - Fairy Graphics: Part 1 - Concept</title>
<style type="text/css">/*\*/@import url(../../css/global-34.css);/**/</style>
<script type="text/javascript" src="../../../www.jagex.com/js/jquery/jquery_1_4_2.js"></script>
<script type="text/javascript">
$(function(){
$("#play, #playExisting, #playBannerNoad").each(function(){ this.href += "?j=1"; })
})
</script>
<style type="text/css">/*\*/@import url(../../css/kbase-6.css);/**/</style>
<script type="text/javascript" src="../../css/kbsearchfill-0.js"></script>
<script type="text/javascript">
new_subcat=add_subcat(4, 5, "Postbag from the Hedge", -1 == 5);new_subcat=add_subcat(4, 6, "Players' Gallery", -1 == 6);new_subcat=add_subcat(4, 19, "God letters", -1 == 19);new_subcat=add_subcat(775, 892, "How do I get started?", -1 == 892);new_subcat=add_subcat(775, 798, "Controls", -1 == 798);new_subcat=add_subcat(775, 795, "Combat", -1 == 795);new_subcat=add_subcat(775, 776, "Skills", -1 == 776);new_subcat=add_subcat(775, 7, "Quests", -1 == 7);new_subcat=add_subcat(775, 1, "Achievement Diary", -1 == 1);new_subcat=add_subcat(775, 10, "Activities", -1 == 10);new_subcat=add_subcat(775, 38, "Distractions and Diversions", -1 == 38);new_subcat=add_subcat(775, 831, "Miscellaneous Guides", -1 == 831);new_subcat=add_subcat(775, 881, "Area Guides", -1 == 881);new_subcat=add_subcat(20, 32, "A New Look RuneScape: Part 1", -1 == 32);new_subcat=add_subcat(20, 21, "Graphics Team - NPC Improvement Project", -1 == 21);new_subcat=add_subcat(9, 127, "Billing", -1 == 127);new_subcat=add_subcat(9, 126, "Technical", -1 == 126);new_subcat=add_subcat(9, 827, "Safety & Security Guidelines", -1 == 827);new_subcat=add_subcat(9, 872, "Other", -1 == 872);
</script>
<meta name="language" content="en, de, fr">
<meta name="description" content="Mod Joe goes through the process of updating the look of Zanaris and fairy NPCs.">
<style type="text/css">
.links {
font-style: italic;
}
#ddLogo {
float: left;
margin-left: 1px;
}
#ddBanner {
margin: 1em 0;
}
.subarticleHeader {
margin: 1em 0 4px;
border: 1px solid #ccbe99;
text-align: center;
}
.bigquote { font-size:medium; font-weight:bold; font-style:italic; text-align:left; }
.mod { font-weight:bold; }
.team { font-weight:bold; }
.quote { font-style:italic; }
.quest { font-style:italic; }
.caption { font-size:85%; font-weight:bold; }
</style>
</head>
<body id="navcommunity" class="bodyBackground">
<a name="top"></a>
<div class="bodyBackgroundHeadAdvert">
<div id="headAdvert">
<iframe name="Advert" src="../../../services.runescape.com/m%3dadvert/banner5052.html?size=730" allowtransparency="true" width="766" height="96" scrolling="no" frameborder="0"></iframe>
<script type="text/javascript">
setTimeout(function() {
var url = "http" +
(/https:/.test(document.location.href) ? "s" : "") +
"://beacon.scorecardresearch.com/scripts/beacon.dll" +
"?c1=8&c2=6035824&c3=1271511541440201100" +
escape(document.location.href) +
"&c8=" + escape(document.title) +
"&c9=" + escape(document.referrer) +
"&c10=" + escape(screen.width+'x'+screen.height) +
"&rn=" + (new Date()).getTime();
var i = new Image();
i.src = url;
}, 1);
</script>
<noscript>
<img src="https://beacon.scorecardresearch.com/scripts/beacon.dll?c1=8&amp;c2=6035824&amp;c3=1271511541440201100&amp;x=NOJAVASCRIPT" alt="" />
</noscript>
</div>
<div id="menubox">
<ul id="menus">
<li class="top"><a href="./../../../www.runescape.com/index.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="if(!this.j){this.href+='?j=1';this.j=true;}"><span class="ts">Play Now</span></a>
<ul>
<li><a href="./../../../secure.runescape.com/m=create/index.html" class="fly"><span>New Users</span></a></li>
<li><a href="https://github.com/2009scape/2009Scape/releases/latest/download/2009Scape.jar"
onclick="if(!this.j){this.href+='?j=1';this.j=true;}" class="fly"><span>Existing
Users</span></a></li>
</ul>
</li>
<li class="top"><a id="account" class="tl" href="./../../../www.runescape.com/custom/404.html"><span class="ts">Account</span></a>
<ul>
<li><a href="./../../../www.runescape.com/custom/404.html" class="fly"><span>Upgrade Your Account</span></a></li>
<li><a href="./../../../secure.runescape.com/m=create/index.html" class="fly"><span>Create New
Account</span></a></li>
<li><a href="./../../../www.runescape.com/custom/404.html" class="fly"><span>Account Management</span></a></li>
</ul>
</li>
<li class="top"><a id="guide" class="tl" href="./../../../www.runescape.com/custom/404.html"><span class="ts">Game
Guide</span></a>
<ul>
<li><a href="./../../../www.runescape.com/custom/404.html" class="fly"><span>Manual</span></a></li>
<li><a href="./../../../www.runescape.com/custom/404.html" class="fly"><span>QuestHelp</span></a></li>
<li><a href="./../../../www.runescape.com/custom/404.html" class="fly"><span>Grand Exchange</span></a></li>
<li><a href="./../../../www.runescape.com/custom/404.html" class="fly"><span>Rules</span></a></li>
<li><a href="./../../../www.runescape.com/custom/404.html" class="fly"><span>Lores</span></a></li>
<li><a href="./../../../www.runescape.com/custom/404.html" class="fly"><span>What is RuneScape?</span></a></li>
</ul>
</li>
<li class="top"><a id="community" class="tl" href="./../../../www.runescape.com/custom/404.html"><span class="ts">Community</span></a>
<ul>
<li><a href="./../../../www.runescape.com/custom/404.html" class="fly"><span>Forums</span></a></li>
<li><a href="./../../../www.runescape.com/custom/404.html" class="fly"><span>Hiscores</span></a></li>
<li><a href="./../../../www.runescape.com/custom/404.html" class="fly"><span>Player Submissions</span></a></li>
<li><a href="./../../../www.runescape.com/custom/404.html" class="fly"><span>Adventurer's Log</span></a></li>
<li><a href="./../../../www.runescape.com/custom/404.html" class="fly"><span>Polls</span></a></li>
<li><a href="./../../../www.runescape.com/custom/404.html" class="fly"><span>Downloads &
Wallpapers</span></a></li>
</ul>
</li>
<li class="top"><a id="help" class="tl" href="./../../../www.runescape.com/custom/404.html"><span class="ts">Help</span></a>
<ul>
<li><a href="./../../../www.runescape.com/custom/404.html" class="fly"><span>Customer Support</span></a></li>
<li><a href="./../../../www.runescape.com/custom/404.html"
class="fly"><span>Password Recovery</span></a></li>
<li><a href="./../../../www.runescape.com/custom/404.html"
class="fly"><span>Locked Account Recovery</span></a></li>
<li><a href="./../../../www.runescape.com/custom/404.html" class="fly"><span>Appeal Bans & Mutes</span></a></li>
<li><a href="./../../../www.runescape.com/custom/404.html" class="fly"><span>Submit a Bug Report</span></a></li>
<li><a href="./../../../www.runescape.com/custom/404.html" class="fly"><span>Parents' Guide</span></a></li>
</ul>
</li>
<li class="top"><a href="https://github.com/2009scape/" id="login" class="tl"><span class="ts">Source
Code</span></a></li>
</ul>
<br class="clear" />
</div>
<div id="scroll">
<div id="head"><div id="headBg">
<div id="langAndLogin">
<div id="lang">
<a href="../../title.html"><img alt="English" title="English" src="../../img/main/layout/en.gif" /></a>
<a href="../../l%3d1/title.html"><img alt="Deutsch" title="Deutsch" src="../../img/main/layout/de.gif" /></a>
<a href="../../l%3d2/title.html"><img alt="Fran&ccedil;ais" title="Fran&ccedil;ais" src="../../img/main/layout/fr.gif" /></a>
<a href="../../l%3d3/title.html"><img alt="Portugu&ecirc;s (BR)" title="Portugu&ecirc;s (BR)" src="../../img/main/layout/br.gif" /></a>
</div>
</div>
<div class="navigation">
<div class="location">
<b>Location: </b> <a href="../../title.html">Home</a> &gt;
<a href="dev_diary-2.html">Development Diaries</a> &gt; Fairy Graphics: Part 1 - Concept<br />
</div>
</div>
</div></div>
<div id="content">
<div id="article">
<div class="sectionHeader">
<div class="left">
<div class="right">
<h1 class="plaque_medium">
Fairy Graphics: Part 1 - Concept
</h1>
</div>
</div>
</div>
<div class="section">
<div class="article_theme_1">
<div class="article">
<div class="topshadow">
<div class="bottomborder">
<div class="leftshadow">
<div class="rightshadow">
<div class="leftcorner">
<div class="rightcorner">
<div class="bottomleft">
<div class="bottomright">
<div class="links"></div><br/>
<img id="ddBanner" style="margin:1em auto; display:block;" src="../../img/varrock/devdiary/diaryFairy/banner.jpg" alt="Development Diary - Fairy Graphics" />
<div class="headings">
<span class="headertitleleft"><span class="headertitleright">17th April 2009 - Concept</span></span>
</div>
<p>Hi guys, I<>m <span class="mod">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="mod">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. 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>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>
<div class="imgcentre" style="width:610px;">
<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">
<img src="../../img/varrock/devdiary/diaryFairy/fairy_comparison.jpg" alt=""/ width=600 height=180>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Screenshots of Zanaris as it was in 2004, and how it looked after the 'bluer' rework in 2006
</div>
</div>
<div class="clear"></div>
<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="mod">Mod GG</span>, to get some ideas on what we could do.</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="mod">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>
<div class="imgcentre" style="width:610px;">
<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">
<img src="../../img/varrock/devdiary/diaryFairy/fairy_queen.jpg" alt=""/ width=600 height=230>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Variations on the new look for fairies, using the Fairy Queen as a basis
</div>
</div>
<div class="clear"></div>
<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>
<div class="imgcentre" style="width:610px;">
<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">
<img src="../../img/varrock/devdiary/diaryFairy/fairy_houses.jpg" alt=""/ width=600 height=429>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Concept art of fairy tree-houses
</div>
</div>
<div class="clear"></div>
<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 class="imgcentre" style="width:610px;">
<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">
<img src="../../img/varrock/devdiary/diaryFairy/fairy_zanaris.jpg" alt=""/ width=600 height=260>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
'Mood' artwork for the redesigned Zanaris
</div>
</div>
<div class="clear"></div>
<p>Should you have any questions about anything mentioned in this diary, or other aspects of the game that you feel would benefit from a graphical improvement, then by all means post them on the forums. I<>ll do my best to answer them.</p>
<p><b><i>Mod Joe<br>Art Director, RuneScape Graphics</i></b></p>
<div class="backtotop"><a href="#top">Back to the top</a></div>
<br/>
<center><img src="../../img/main/kbase/hr.png" alt=""/></center>
<table class="bottomlinks">
<tr>
</tr>
<tr>
<td class="bot"><p><div class="bold">More articles in
<a href="dev_diary-2.html">Development Diaries</a>
</div></p>
<ul class="bold">
<li>
<a href="diary_runenergy.html">Run Energy: Part 1 - Rest and Musicians</a>
</li>
<li>
<a href="diary_fairy02.html">Fairy Graphics: Part 2 - Modelling</a>
</li>
<li>
<b>Fairy Graphics: Part 1 - Concept</b>
</li>
<li>
<a href="diary_worldmap.html">World Map Update: Dungeon Maps</a>
</li>
<li>
<a href="diary_dwarf03.html">New Dwarf Quest: Part 3 - Implementation Begins</a>
</li>
</ul>
</div>
</td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="search">
<div class="searchtop">
<div class="bottombordershad">
<div class="leftshadow">
<div class="rightshadow">
<div class="topleft">
<div class="topright">
<div class="bottomleftshad">
<div class="bottomrightshad">
<div class="searchtext">
<form method="get" action="http://www.runescape.com/kbase/search.ws">
<table class="bottomsearch">
<tr>
<td class="searchtitles" width="60" style="text-align: right">
Search for:
</td>
<td>
<input class="textinput" name="search_query" id="search_query" size="29" maxlength="300" value="">
</td>
<td rowspan="3">
<table>
<tr>
<td>
<label class="bold">Criteria:</label>
</td>
<td></td>
<td><label class="bold">Find:</label></td>
</tr>
<tr>
<td>
<input class="widget" type="checkbox" name="title_chk" value="1" checked="checked">
Title
</td>
<td>
<input class="widget" type="checkbox" name="keywords_chk" value="1" checked="checked">
Keywords
</td>
<td>
<input class="widget" type="radio" name="and_rad" value="1" checked="checked">
All
</td>
</tr>
<tr>
<td>
<input class="widget" type="checkbox" name="description_chk" value="1" checked="checked">
Description
</td>
<td>
<input class="widget" type="checkbox" name="body_chk" value="1" checked="checked">
Body
</td>
<td>
<input class="widget" type="radio" name="and_rad" value="0">
Any
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="searchtitles">
Category:
</td>
<td>
<select name="category" id="search_cat_select_footer" onchange="update_cats('_footer')">
<option value="null"> - ALL - </option>
<option value="4">Player Submissions</option>
<option value="775">Game Guide</option>
<option value="20">Development Diaries</option>
<option value="9">Customer Support</option>
<option value="3">Lores and Histories</option>
</select></td>
<td></td>
</tr>
<tr>
<td class="searchtitles">
Subcategory:
</td>
<td>
<div id="search_subcat_footer" style="display: none;">
<select name="subcat" id="search_subcat_select_footer">
<option value="null"> - ALL - </option>
</select>
</div>
<script type="text/javascript">
document.getElementById("search_subcat_footer").style.display="inline";
update_cats('_footer');
</script>
</td>
<td></td>
</tr>
</table>
<p style="text-align: center;font-size:11px;font-weight:bold; margin-bottom: 0px;">For help on searching, see our <a href="../searchtips.html">Search Tips</a> page.
<input type="submit" name="submit" class="searchbutton" value="" alt="Search"></p>
</form>
</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> 1999 - 2010 Jagex Ltd<br />
Use of this website is subject to our <a href="../../terms/terms.html">Terms &amp; Conditions</a> and <a href="../../privacy/privacy.html">Privacy Policy</a>.
</div>
<a class="jagexlink" href="../../../www.jagex.com/index.html" target="_blank">
<img src="../../img/main/layout/jagexc20a.png?12" alt="Jagex" />
</a>
<br class="clear"/>
</div>
<br class="clear"/>
</div>
</div>
</div>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol)?"https://ssl.":"http://www.");
document.write(unescape("%3Cscript src='"+gaJsHost+"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 www.runescape.com/kbase/guid/diary_fairy01 by HTTrack Website Copier/3.x [XR&CO'2010], Sun, 18 Jul 2010 10:50:17 GMT -->
<!-- Added by HTTrack --><meta http-equiv="content-type" content="text/html;charset=ISO-8859-1"><!-- /Added by HTTrack -->
</html>
Reference in New Issue View Git Blame Copy Permalink