2009scape-website/site/kbase/guid/diary_fairy02.html
2020-11-20 13:04:06 -05:00

386 lines
16 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 site/kbase/guid/diary_fairy02 by HTTrack Website Copier/3.x [XR&CO'2010], Sun, 18 Jul 2010 10:50:16 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 2 - Modelling">
<title>RuneScape - MMORPG - Fairy Graphics: Part 2 - Modelling</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/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="./../../../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="./../../../404.html"><span class="ts">Account</span></a>
<ul>
<li><a href="./../../../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="./../../../404.html" class="fly"><span>Account Management</span></a></li>
</ul>
</li>
<li class="top"><a id="guide" class="tl" href="./../../../site/kbase/guid/manual.html"><span class="ts">Game
Guide</span></a>
<ul>
<li><a href="./../../../site/kbase/guid/manual.html" class="fly"><span>Manual</span></a></li>
<li><a href="./../../../site/kbase/guid/quests0.html" class="fly"><span>QuestHelp</span></a></li>
<li><a href="./../../../404.html" class="fly"><span>Grand Exchange</span></a></li>
<li><a href="./../../../404.html" class="fly"><span>Rules</span></a></li>
<li><a href="./../../../404.html" class="fly"><span>Lores</span></a></li>
<li><a href="./../../../404.html" class="fly"><span>What is RuneScape?</span></a></li>
</ul>
</li>
<li class="top"><a id="community" class="tl" href="./../../../404.html"><span class="ts">Community</span></a>
<ul>
<li><a href="./../../../404.html" class="fly"><span>Forums</span></a></li>
<li><a href="./../../../404.html" class="fly"><span>Hiscores</span></a></li>
<li><a href="./../../../404.html" class="fly"><span>Player Submissions</span></a></li>
<li><a href="./../../../404.html" class="fly"><span>Adventurer's Log</span></a></li>
<li><a href="./../../../404.html" class="fly"><span>Polls</span></a></li>
<li><a href="./../../../404.html" class="fly"><span>Downloads &
Wallpapers</span></a></li>
</ul>
</li>
<li class="top"><a id="help" class="tl" href="./../../../404.html"><span class="ts">Help</span></a>
<ul>
<li><a href="./../../../404.html" class="fly"><span>Customer Support</span></a></li>
<li><a href="./../../../404.html"
class="fly"><span>Password Recovery</span></a></li>
<li><a href="./../../../404.html"
class="fly"><span>Locked Account Recovery</span></a></li>
<li><a href="./../../../404.html" class="fly"><span>Appeal Bans & Mutes</span></a></li>
<li><a href="./../../../404.html" class="fly"><span>Submit a Bug Report</span></a></li>
<li><a href="./../../../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>
<div class="navigation">
<div class="location">
<b>Location: </b> <a href="../../index.html">Home</a> &gt;
<a href="dev_diary-2.html">Development Diaries</a> &gt; Fairy Graphics: Part 2 - Modelling<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 2 - Modelling
</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">14th May 2009 - Modelling</span></span>
</div>
<a href="../../img/varrock/devdiary/diaryFairy/fairy_outside_large.jpg" target="_blank">
<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">
<img src="../../img/varrock/devdiary/diaryFairy/fairy_outside.jpg" alt=""/ width=320 height=240>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Click the image to see a larger version
</div>
</a>
<p>After getting the beautiful concept artwork for the fairy area from <span class="mod">Mod GG</span>, I knew we had a lot of work ahead of us! The old fairy area was worked on by myself and <span class="mod">Mod Paul B</span> in the days before we had concept artists and the High Detail mode, so I know the area very well and was keen to rework it using all the new technology that we have available to us.</p>
<p>We want the fairy area to feel magical and organic. The fairies work with nature in an astral realm, so I want to distance the area from the rest of RuneScape so that the player feels that they have travelled a long way to get here. To help this we have introduced new types of fantastical plants and a slightly jade colour to the vegetation so that this does not feel like a typical RuneScape area. This is something we had tried to introduce with the previous <20>Blue Period<6F> rework, which, looking back, was far too garish. I feel the new, more subtle, colour scheme looks magical and otherworldly without being too obvious.</p>
<div class="imgleft">
<img src="../../img/varrock/devdiary/diaryFairy/fairy_tree.gif" alt=""/ width=362 height=400>
<br/>
Zanaris tree from wireframe, to flat shading, to textured model
</div>
<p style="clear:right;">The fairies live in tree houses, so I really wanted to make an important feature of them. The trees they live in are now some of the largest in RuneScape and some of the most complicated models made yet! We also spent a lot of time ensuring that all of the furniture and technology feels as though it was created for fairies - the tables are far too small to be used by the humans that come to visit the area; even the range and furnace are fairy scale. The only problem this led to was having to create two sets of doors: fairies use a pint-sized door that opens at full height for players.</p>
<p>One issue we had was with the roofs of the floor-based buildings. We really wanted to get away from the grotto look of the previous versions of the area and knew that the area had to have most of the main buildings on the ground floor so that players could easily access them. The <a href="diary_fairy01.html">concept art</a> looked great having small ground buildings, and they looked great in game, but as soon as we started to map larger buildings they looked very plain and boring, like an expanse of wood. We sent <span class="mod">Mod GG</span> back to the drawing board and he came up with the idea of open courtyards for the larger buildings. This worked really well, giving the area the feeling of ancient Rome, where houses blurred the line between inside and outside space.</p>
<br class="clear"/>
<a href="../../img/varrock/devdiary/diaryFairy/fairy_character_large.jpg" target="_blank">
<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">
<img src="../../img/varrock/devdiary/diaryFairy/fairy_character.jpg" alt=""/ width=320 height=240>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Click the image to see a larger version
</div>
</a>
<p style="clear:left;">When it comes to the inhabitants of <a href="zanaris_members.html">Zanaris</a>, <span class="mod">Mod Alec</span> created a couple of character models to make sure that they read well in the engine and had the right look. My main concern with the fairies was that they were so small; <span class="mod">Mod Alec</span> made them slightly larger for the rework so that we could add more detail to them, and so that it was easier to create animations that had more life in them. We wanted the fairies to look beautiful and graceful, with a great deal of variety and customisation. We took extra special care with the Godfather and Fairy Queen, who now, respectively, look more malevolent and dignified. </p>
<p>We hope you<6F>ll enjoy the new-look Zanaris; I think you will agree it<69>s now a really special corner of RuneScape. The next step in the development process is animation, but we will go into more detail about how we made the fairies fly in the next diary.</p>
<p><b><i>Mod Nick F<br>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_runenergy02.html">Run Energy: Part 2 - Test'n Musicians</a>
</li>
<li>
<a href="diary_runenergy.html">Run Energy: Part 1 - Rest and Musicians</a>
</li>
<li>
<b>Fairy Graphics: Part 2 - Modelling</b>
</li>
<li>
<a href="diary_fairy01.html">Fairy Graphics: Part 1 - Concept</a>
</li>
<li>
<a href="diary_worldmap.html">World Map Update: Dungeon Maps</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">
<p style="text-align: center;font-size:11px;font-weight:bold; margin-bottom: 0px;"><img src="https://runescape.wiki/images/f/f4/Red_partyhat.png?7ed30"></p>
</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 site/kbase/guid/diary_fairy02 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>