2009scape-website/site/kbase/guid/dev_diary08a.html
2020-11-24 12:27:36 -05:00

381 lines
24 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/dev_diary08a by HTTrack Website Copier/3.x [XR&CO'2010], Sun, 18 Jul 2010 10:50:18 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="MMORPG, free RPG games online, online multiplayer, role-playing, massively multiplayer games, mmo, RuneScape, Jagex, java">
<meta name="description" content="Play RuneScape for free, and join a global community of millions as you complete quests and win enormous treasures in a 3D world full of magic and monsters.">
<meta name="title" content="RuneScape - MMORPG - The No.1 Free Online Multiplayer Game">
<title>RuneScape - MMORPG - The No.1 Free Online Multiplayer Game</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">
var link_no=0;
function open_window(url, width, height) {
var settings="toolbar=0,scrollbars=0";
if(width && width!=0) settings+=",width=" + width;
if(height && height!=0) settings+=",height=" + height;
window.open(url, "popuplink" + link_no++, settings);
}
var subcats=new Array();
function add_subcat(parent, id, name, selected) {
if(!subcats[parent]) subcats[parent]=new Array();
var new_option=document.createElement("OPTION");
new_option.name=name;
new_option.innerHTML=name;
new_option.value=id;
if(selected) { new_option.selected='selected'; }
subcats[parent][subcats[parent].length]=new_option;
return new_option;
}
function update_cats(suffix) {
if(!suffix) suffix="";
var top_level_select=document.getElementById("search_cat_select" + suffix);
var subcat_select=document.getElementById("search_subcat_select" + suffix);
if(!top_level_select || !subcat_select) return;
if(subcat_select.options)
for(old in subcat_select.options) subcat_select.options[1]=null;
to_show=top_level_select.value;
if(to_show>-1 && subcats[to_show]) {
for(new_opt=0; new_opt<subcats[to_show].length; new_opt++) {
var oldopt=subcats[to_show][new_opt];
var newopt=document.createElement("OPTION");
newopt.name=oldopt.name;
newopt.innerHTML=oldopt.innerHTML;
newopt.value=oldopt.value;
subcat_select.appendChild(newopt);
}
}
}
window.onload=function() {
update_cats();
update_cats('_footer');
}
</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>
</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> > A New Look RuneScape: Part 1
</div>
</div>
</div></div>
<div id="content">
<div id="article">
<div class="sectionHeader">
<div class="left">
<div class="right">
<h1 class="plaque">
A New Look RuneScape: Part 1
</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">
<style type="text/css">
.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; }
.caption { font-size:85%; font-weight:bold; }
</style>
<div class="links"></div>
<br><br>
<div style="text-align: center">
<div style="text-align: justify;color: #402706; margin: auto;">
<p style="text-align: center;">
<p style="text-align: center;"><img src="../../img/varrock/devdiary/comic/comic08.gif" alt="comic strip"></p>
</p>
<br>
<h3 style="text-align: center;"><b>A New Look RuneScape: Part 1</b></h3>
<p>The saying goes that a picture is worth a thousand words, which is why we decided to first announce RuneScape's new detail mode with a couple of screenshots. If you have not seen them yet, check out the '<a href="../../../services/m%3dnews/newsitem2635-2.html?id=1218">An Image of the Future</a>' and the '<a href="../../../services/m%3dnews/newsitem9237.html?id=1230">An Image of the Not-Too-Distant Future</a>' newsposts. The pictures in this <a href="dev_diary-2.html">Development Diary</a> (part one of two) will continue to do most of the talking, but if you'd like to know everything about how this graphical update pushes the boundaries of Java-based online games, read on...</p>
<br>
<p style="text-align: center;"><b>A brief history of Tools</b></p>
<div style="width: 25%; float:left; margin:15px 15px 35px 15px; text-align: left;">
<p class="bigquote">
"We've considered a hardware-rendered version of RuneScape a number of times in the past, but it was only two years ago that we felt Java was mature enough."
</p>
<p>
<img src="../../img/varrock/devdiary/jmod.gif"><span class="mod">Andrew</span><br><span class="team">Lead Developer</span>
</p>
</div>
<p>The story of this graphic update project began a year and a half ago, and who better to ask about it than Lead Developer, <span class="mod">Andrew Gower</span>: <span class="quote"><EFBFBD>We've considered a hardware-rendered version of RuneScape a number of times in the past, but it was only two years ago that we felt Java was mature enough.<2E></span> We knew the things we wanted <20> textures, shadows, lighting, fullscreen <20> and it seemed the right time to start, as <span class="mod">Andrew</span> continues: <span class="quote"><EFBFBD>I tasked the <span class="team">Tools</span> team to run a feasibility study to verify if it was possible to do what we wanted to do.<2E></span></p>
<p><span class="mod">Mod Nick</span>, Head of <span class="team">Tools</span>, says, <span class="quote"><EFBFBD>It wasn't long before it became apparent that we wanted to do this, needed to do this to move forward and, more importantly,</span> could <span class="quote">do this, so it became my team's main focus.<2E></span> The <span class="team">Tools</span> team, which develops and maintains all of Jagex's in-house development software, then went about this study. They had to be very thorough, so spent around nine months researching things like how possible all of the features we wanted were, how we would do them, how they'd fit together, etc. <span class="mod">Mod Nick</span> says, <span class="quote"><EFBFBD>The feasibility study had to cover everything we wanted to achieve; we didn't start any work on the game's engine until we could prove, 100%, that nothing would stop us.<2E></span></p>
<br>
<br>
<p style="text-align: center;"><b>Graphics re: sources</b></p>
<p>It wasn't just the <span class="team">Tools</span> team that was bolstered for this project: <span class="quote"><EFBFBD>I was brought on to the project when it went into full development, concepting all the areas, and worked with <span class="team">Tools</span> on how this project was actually going to work,<2C></span> says <span class="team">Graphics</span>' <span class="mod">Mod Farley</span>. He continues with, <span class="quote"><EFBFBD>The actual development work wasn't too hard. The main problem was the sheer size of the task: how to manage over 32,000 assets, all those map squares, etc.<2E></span> It was clear from the size of the project that the <span class="team">Graphics</span> team would need new resources, so it could work on this graphical improvement while looking after all of its existing responsibilities.</p>
<br>
<p align="center"><img src="../../img/varrock/devdiary/diary08/terrorbird_thumb.gif" style="display:block; margin: auto;" alt="textured terrorbird"><br><span class="caption">Click <a href="diary08a1.html">here</a> to see a larger version of this image.</span></p>
<br>
<p><span class="mod">Mod Farley</span> says, <span class="quote"><EFBFBD>We brought in a team of almost 30 artists, giving opportunities to people new to the games industry, a lot of them straight out of university...they've really risen to the task.<2E></span> Initially, we considered that a project of this scale might require more artists, but those we got proved to be so efficient and prolific, there was no need. <span class="quote"><EFBFBD>Some of them had limited experience, but they've all proven themselves. Some are now even running parts of the project on their own,<2C></span> says <span class="mod">Mod Farley</span>. That <span class="team">Graphics</span> project team, with the support of the <span class="team">Tools</span> team, have put nine months of development into RuneScape's new look, for a total project length of eighteen months.</p>
<br>
<p style="text-align: center;"><b>Texture massaging</b></p>
<p>The first and perhaps most obvious improvement is that everything in RuneScape has been given a texture. In the other detail modes, most surfaces are simply shaded, as textures require more memory, something that we have to be very strict with to make RuneScape run through Java in a browser. <span class="mod">Mod Farley</span> says, <span class="quote"><EFBFBD>For example, previously, a brown surface could have been depicting mud, wood or clay, its actual substance only being derivable from context, but with textures, it's easy to tell apart a muddy path, wood flooring or a clay object at a glance.<2E></span></p>
<br>
<p align="center"><img src="../../img/varrock/devdiary/diary08/textures_thumb.jpg" style="display:block; margin: auto;" alt="textures"><br><span class="caption">Don't worry about our familiar friend in the image above, characters will have improved round shadows.<br>Click <a href="../../img/varrock/devdiary/diary08/textures.jpg" target="_blank">here</a> to see a larger version of this image.</span></p>
<br>
<div style="float:right; width:30%; margin:15px; text-align: left;">
<p class="bigquote">
"I once accidentally ended up with this crazy, jelly-like texture while trying to make a floor texture."
</p>
<p>
<img src="../../img/varrock/devdiary/jmod.gif"><span class="mod">Mod Lluis</span><br><span class="team">Graphics</span>
</p>
</div>
<p>The way we implement textures in RuneScape is slightly different from the norm as, even though PC graphics cards can deal with textures, they still need to be downloaded by the RuneScape game client. As textures can have large file sizes, they would take too long to download. <span class="mod">Mod Nick</span> explains the process: <span class="quote"><EFBFBD>The <span class="team">Graphics</span> team create textures in an editor, which then converts it into a series of instructions at a fraction of the file size. Instead of the game downloading a texture, it's recreated on the player's computer from that series of instructions, as and when it's needed. This is called procedural texturing.<2E></span> Texturing is not the only thing we do procedurally, which is what has allowed us to keep the experience of playing RuneScape in the new detail mode the same as it currently is (e.g. a comparable loading time after the initial download and no extra steps required).</p>
<p>Designing textures in this way requires more than artistic ability, though. <span class="mod">Mod Farley</span> says, <span class="quote"><EFBFBD>An artist controls a whole load of graphs, charts and nodes to build a texture; the combined art and math involved takes a lot of ability and skill. It's more like sculpting than drawing.<2E></span> Indeed, it can, on occasion, cause unexpected results, as <span class="team">Graphics</span>' <span class="mod">Mod Lluis</span> explains, <span class="quote"><EFBFBD>I once accidentally ended up with this crazy, jelly-like texture while trying to make a floor texture.<2E></span> He kept it as, although it wasn't ideal for a floor, it was perfect for the spirit jelly familiar.</p>
<br>
<p style="text-align: center;"><b>Premium blend</b></p>
<p>Textures add a lot to the game, creating a more realistic and immersive environment, but one of the other enhancements related to texturing is better blending. You'll be able to see in all the screenshots that the areas where surfaces meet is less pronounced and more natural. <span class="mod">Mod Farley</span> says, <span class="quote"><EFBFBD>Previously, paths had very hard edges, which showed up how we built the world. Now, with softer path blending, things look more organic.<2E></span></p>
<br>
<p align="center"><img src="../../img/varrock/devdiary/diary08/blending_thumb.jpg" style="display:block; margin: auto;" alt="path blending"><br><span class="caption">Note the varying ground textures of this farm in Rellekka and how they flow into one another.<br>Click <a href="../../img/varrock/devdiary/diary08/blending.jpg" target="_blank">here</a> to see a larger version of this image.</span></p>
<br>
<p>Before, everything was just flat colour, so we've had to introduce a greater variety of ground types to avoid over repetition. Blending has been implemented to allow both underlay and overlay textures too, for instance allowing a grass texture to be placed over a mud texture. The combined effect can be quite subtle and just looks natural. <span class="quote">"If something just looks and feels right, if you don't notice these things after the initial 'Wow!', then that's real success,"</span> says <span class="mod">Mod Nick</span>.</p>
<br>
<p style="text-align: center;"><b>Wrestling with shadows</b></p>
<p>Every object in the game now casts a shadow based on where we've positioned the sun for that location. <span class="mod">Mod Nick</span> says, <span class="quote"><EFBFBD>Different areas will be sunny or gloomy, and shadows are created dynamically.<2E></span> Different areas will be set at varying times of the day, subtly changing between map squares, allowing us to create specific atmospheres in each area. For instance, certain parts of <a href="the_races_of_runescape.html">Morytania</a> now live within a permanent shadowy twilight...appropriately spooky for those living under vampyric oppression.</p>
<br>
<p align="center"><img src="../../img/varrock/devdiary/diary08/shadows_thumb.jpg" style="display:block; margin: auto;" alt="shadows"><br><span class="caption">As it would in reality, the cactus shadow falls differently to the palm trees, due to the changing gradient of the slope.<br>Click <a href="../../img/varrock/devdiary/diary08/shadows.jpg" target="_blank">here</a> to see a larger version of this image.</span></p>
<br>
<p>Another effect that allows us to create atmosphere is the use of fog. The actual draw distance - how far away objects can be seen from - hasn't changed. Previously, objects coming into a player's view would just pop into existence. <span class="mod">Mod Nick</span> says, <span class="quote"><EFBFBD>The combination of blending and fogging allows us to introduce things on the horizon more naturally and smoothly.<2E></span> The colour and thickness of fog can also be adjusted, so it gives <span class="team">Graphics</span> another atmospheric tool to create, say, a murky swamp environment with a cloying, gangrenous fog (a real pea souper)...and who knows what monsters might be lurking within...</p>
<br>
<p align="center"><img src="../../img/varrock/devdiary/diary08/flag_shadows_thumb.jpg" style="display:block; margin: auto;" alt="animated shadows"><br><span class="caption">Some more shadows outside the Champions' Guild<br>Click <a href="diary08a2.html">here</a> to see a...different version of this image.</span></p>
<br>
<p style="text-align: center;"><b>In the next Development Diary...</b></p>
<p>We hope this Development Diary has answered some of your questions regarding this imminent ('within a couple of months') update. More questions will be answered in the lead up to release, both in the concluding part of this diary and in the usual ways (Behind the Scenes, newsposts, etc). Part two of this diary focuses on lighting, water effects, fullscreen mode and more...</p>
<p style="text-align: left;"><b>Concluded in: </b><a href="diary08b.html">A New Look RuneScape: Part 2</a></p>
</div>
</div>
<div class="backtotop"><a href="#top">Back to the top</a></div>
<div class="clear"></div>
<div class="clear"></div>
</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 under AGPL<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/dev_diary08a by HTTrack Website Copier/3.x [XR&CO'2010], Sun, 18 Jul 2010 10:50:19 GMT -->
<!-- Added by HTTrack --><meta http-equiv="content-type" content="text/html;charset=ISO-8859-1"><!-- /Added by HTTrack -->
</html>