`Creating A Serious Game with DXStudio1Tutorial: Creating A Serious Game with DXStudioBy Dr Penny de BylIntroductionIn this tutorial I am going to step you through the creation of a simple serious game using DXStudio (http://www.dxstudio.com). We will begin by examining an existing educational game, breaking it down into game mechanics and other parts and then reconstructing it.The Sample GameThe serious game we are going to examine can be found at: http://nobelprize.org/educational_games/chemistry/plastics/index.html. In short it introduces the player to the domain of plastics chemistry, how plastics are made and the differences between Thermoplastics and Thermosets. One type of plastic melts and the other doesn't. The object of the game is to determine what plastic objects are made with to get enough &quot;points&quot; to create a rubber duck. At this stage its probably a good idea for you to play the actual game to get a better idea of gameplay.EASLE ­ Bottom-Up Serious Game Design MethodTo create a serious game you need to break the game up into parts which define the gameplay and mechanics. The Embedded Authentic Serious game-based Learning Experiences (EASLE) architecture I've developed over years of creating serious games will help us define our serious game (de Byl 2008). In this case we are starting with an existing game therefore we just need to fill out the EASLE architecture with information about the game. Before continuing you should read the before mentioned paper which is available from http://www.penslayer.com/files/EASLE.pdf. The goal now is to fill out an EASLE table with details about the Plastic Making Game. This table is shown in Table 1. Table 1. The EASLE definition of the Heating Plastics Game Genre Gameplay Mechanics 2D Matching Game, True/False answer set. Player is shown 6 types of plastic objects. Player must determine which objects will melt and which ones won't. Player can mouse over the object to see its chemical structure. Players determine the type of plastic the object is made with and click Yes if it is a thermoplastic and No if it is a2Thermoset. After Yes or No is selected the player's mouse cursor turns into a fire which the player can place over the object to see if it will melt or not. Reward points are added to give player their total score. Game Rules Thermoplastic objects melt when fire is placed on them. Thermoset objects do not melt when fire is placed on them. Player can only click YES or NO If player clicks YES (the object will melt) for a Thermoplastic object they receive reward points. If player clicks NO for a Thermoplastic object they don't receive reward points. If player clicks YES for a Thermoset object they don't receive reward points. If player clicks NO for a Thermoset object they will receive reward points. Game ends after player has analyzed the 6 objects. Theme Icons Plastic Rubber Duck. Lots of Yellow and game host is a rubber duck. Plastic Items Chemical Structure Bubble which appears when an item is moused over Scenes Scene 1. Information Tutorial (not playable) presents player with information about plastics. Scene 2. Player is given 6 objects and they have to determine which ones are Thermoplastic and which ones are Thermosets. Story I have determined that plastics with a spaghetti like molecular structure will melt under heat. Nylon Stockings are made from polyamide which is a Thermoplastic.For our replication of this game we don't want it to be exactly the same as we are recreating it in a 3D environment however we do need to keep the Game Rules, Icons and Story as these are the parts which contain the educational content. However I do like the rubber duck so I'll include him as the Tutor. The new EASLE parts for the redesign are shown in Table 2. Table 2. EASLE Redesign for Heating Plastic Game RecreationCreating A Serious Game with DXStudio3Genre3D Environment with User Camera fixed (e.g. player cannot move around the scene) Plastic items move along a conveyor belt towards a melting furnace. If the item is Thermoplastic it will melt in the furnace, if it is Thermoset it will not melt and the furnace will explode. The player must remove Thermoset items from the conveyor belt before they enter the furnace. If they do enter the furnace the furnace explodes and the game is over. The player gets points for each item successfully removed or melted. The conveyor gets faster and faster as the game progresses.Game MechanicsTheme ScenesPlastic Factory with conveyor belt along which plastic items run. Tutorial Scene with Plastic Duck explaining the game. Plastic Items move along a conveyor belt towards a furnace for melting and recycling. As the levels get harder there are more items and the conveyor gets faster.Creating the Game in DXStudioNow we have an idea of our game we can start the fun part ­ the programming! The duck mesh we will use for the tutor can be found at http://www.penslayer.com/models/duck.dxmesh A very simple pedagogical structure for a serious game (and you'll find these in most games) should at least include 4 phases; Explanation, Demonstration, Supervision, Application. Explanation: Tell the player (i.e. student) what they need to know. Give them the facts. Demonstration: Show the player what you are talking about by giving a practical demonstration. This could be a case study, news items or a simple experiment.4Supervision: Allow the player to have some hands on experience while the game play restricts their movements and helps correct wrong ones. In some games you can find during tutorial sessions that if the player is not doing anything, the game will repeat the instructions to the player. Also during this phase the game might instruct the player to try some simple interactions to ensure the player knows what they are doing. Application: Give the player all they can take. Launch them into full game play and see how they go. Given these phases we will create one scene for each in our serious game.Scene One: The Introductory TutorialThis scene involves the duck model, a chat bubble, some spoken text (the duck's voice) and some next and previous buttons. Step One: Open DXStudio and Create a New 3D Scene This scene is basically the duck tutor telling the player about the game and how plastic is made. Create a new 3D Scene and add the duck mesh. Move the camera to locate the duck in the bottom left of the window. You might also want to lift the light up a bit as it floods the duck too much.Creating A Serious Game with DXStudio5Step Two: Adding a Speech Bubble We are now going to add a speech bubble and display text in it. This is available from http://www.penslayer.com/models/speechbubblemesh.dxmesh. Again, the location of the light will determine how this speech bubble appears as it is in the 3D world and shaded by the light. Move the speech bubble so it appears to come from the duck.Now we need to add text to the speech bubble. Add TEXT by clicking on the little green cross highlighted in the above image with a red circle. Rescale and move the text around until it is aligned with the bubble. Change the colour of the text to black and add some dummy text into the textbox so you can determine the wrap width. In this case the wrap width is set to 7 and the text is scaled by 0.089. Pull the text out towards the screen to prevent it from flickering. Rename the textbox to TutorSpeak.6What the duck tutor says to the player we will borrow from the original game ­ or at least bits of it. The text for each part will be displayed on the speech bubble one part at a time and stored in separate strings. Here are the text strings we will use. 1. Plastics are made from organic materials such as crude oil. 2. Crude oil is extracted by large oil drilling rigs. 3. It is processed by an oil refinery to break down the large hydrocarbon molecules into smaller ones called monomers. This is called cracking. 4. A petrochemical plant then creates polymers through chemical reactions. 5. In the plastic factory the polymers are mixed with colouring agents and softeners to form plastic which is shaped into useful products such as plastic ducks. 6. There are two types of plastics. Thermoplastics and Thermosets. 7. Thermoplastics will melt when heat is applied while thermosets stay the same shape until they eventually turn into a pile of charred remains. 8. Thermoplastics can be recycled by melting them down and reshaping. In the JavaScript code for scene_1 we want to add:var scene1Speech = new Array(Creating A Serious Game with DXStudio7&quot;Plastics are made from organic materials such as crude oil.&quot;, &quot;Crude oil is extracted by large oil drilling rigs.&quot;, &quot;It is processed by an oil refinery to break down the large hydrocarbon molecules into smaller ones called monomers. This is called cracking.&quot;, &quot;A petrochemical plant then creates polymers through chemical reactions.&quot;, &quot;In the plastic factory the polymers are mixed with colouring agents and softeners to form plastic which is shaped into useful products such as plastic ducks.&quot;, &quot;There are two types of plastics. Thermoplastics and Thermosets.&quot;, &quot;Thermoplastics will melt when heat is applied while thermosets stay the same shape until they eventually turn into a pile of charred remains.&quot;, &quot;Thermoplastics can be recycled by melting them down and reshaping.&quot;); var currentSpeech = 0; function onInit() { scene.objects.TutorSpeak.text = scene1Speech[currentSpeech]; }This is basically an array of the speech strings and on the scene initialisation the first string is placed in the text bubble. When you run the program the first string will appear.Now we need to add some buttons or text so the player can go forward or backward through the duck tutor's speech.8Add another text item to the scene and rename it next, change the text colour, resize and move it to the right of the text bubble. Duplicate this text item, rename it previous and move it to the left of the text bubble. Then change the text of both these times to &quot;Next&quot; and &quot;Prev&quot;.Before we activate these text items to move the text forward and back we need to add a function to the scene to handle the requests. Therefore to the scene_1 JavaScript, add:function displaySpeech(increment) { currentSpeech = currentSpeech + increment; if(currentSpeech &lt; 0) { currentSpeech = 0; } if(currentSpeech &gt;= scene1Speech.length) { currentSpeech = scene1Speech.length - 1; } scene.objects.TutorSpeak.text = scene1Speech[currentSpeech]; }This function will change the value of currentSpeech, the variable keeping track of which text is currently in the speech bubble.Creating A Serious Game with DXStudio9Now add this script to next:function onClick() { scene.script.displaySpeech(1); }And this script to previous:function onClick() { scene.script.displaySpeech(-1); }Save and run the program and see how clicking on Next and Prev take you forward and back through the speech text. At this time you might find that some text does not neatly fit into the bubble and therefore you should rethink the sentences or make the text smaller. Step 3: The duck has a British Accent The original game has a voice over for each of the duck's speech episodes. To do this you would record the text in your own voice and add this to the game to play when the same text is displayed in the bubble. In this case I've run the text through a textto-speech engine and produced some .wav files. These files are available for download from http://www.penslayer.com/models/duck1.wav ... duck2.wav ... up to duck8.wav. Once you've added the sound files you will need to modify the JavaScript for scene_1 to include an array of the sound file ids and then set them to play when the text in the speech bubble changes, thus:var speechWavs = new Array(&quot;duck1&quot;,&quot;duck2&quot;,&quot;duck3&quot;,&quot;duck4&quot;, &quot;duck5&quot;,&quot;duck6&quot;,&quot;duck7&quot;,&quot;duck8&quot;); var currentSpeech = 0; function onInit() { scene.objects.TutorSpeak.text = scene1Speech[currentSpeech]; scene.sounds.find(speechWavs[currentSpeech]).play(); } function displaySpeech(increment) { currentSpeech = currentSpeech + increment; if(currentSpeech &lt; 0) { currentSpeech = 0; } if(currentSpeech &gt;= scene1Speech.length) { currentSpeech = scene1Speech.length - 1; } scene.objects.TutorSpeak.text = scene1Speech[currentSpeech]; scene.sounds.find(speechWavs[currentSpeech]).play(); }10Save and Run this now. The duck should speak its text with a British Accent. These sounds were created by using the online service at: http://www.research.att.com/~ttsweb/tts/demo.php Step 4: Ambience is everything. Adding Background Music. Time to add some background music. You can use any music clip you like (provided you don't break any copyright regulations) but it should be something that is not annoying, not loud and can repeat over and over again without driving the player crazy. You can make your own music loop or you can find one on the web. A great site is http://www.flashkit.com. Just look for Sound Loops and follow your nose. You will need to right click on the added sound loop to set the loop property which will make it play over and over again while the application is running. To start it playing, in the scene onInit() function add:scene.sounds.background.play(); scene.sounds.background.setVolume(0.5);where background is the sounds id. The second line sets the volume to half. You might want to adjust this depending on the loudness of your sound.Scene Four: The GameThe starting point for this next part can be downloaded from http://www.penslayer.com/models/plasticFactory.dxstudio. In this file you will find all the models, images and sounds for this section. We've jumped to scene four as it contains all the game play and one that is in place it is easier for you to create the tutorial and supervision scenes. When you open the new file, you will see a completed scene_1 as per the previous section and a new scene_2 (yes I should have called this scene _4). This scene is a simple plastic factory. Plastic ducks will come out from the left, move along the conveyor and go into the furnace. All the models in this scene were taken from the DXStudio online library. If you use your imagination when creating your own game I'm sure you can adapt most of what they have in their model library for your own purposes. It's a lot less work than modelling yourself!! What is to happen in this scene is that ducks enter onto the conveyor. As they are created they are randomly assigned as thermoplastic or plastic. The thermoplastic ducks are able to enter the furnace at the other end of the conveyor and get melted down. When this occurs the duck on top of the furnace gets bigger. If a thermoset duck enters the furnace the duck on top catches fire and shrinks. The aim is to get the duck on top of the furnace to a certain size at which it is cashed in. Each duck entering the factory costs \$5. The player gets the \$5 reimbursed if they successfully remove thermoset ducks from the conveyor before they enter the furnace. The player starts with \$200 and when that money runs out the game is over. Let's start coding this scene.Creating A Serious Game with DXStudio11In the scene script we need to add code which creates the ducks. In addition, the game sound and starting money amount are initialised. Type this text into the script for scene_2:var duckCount = 0; var duckCost = 5; var timeBetweenDucks = 10;function onInit() { scenes.gui.objects.money.text = 200; scene.objects.fire.emitter.active = false; scene.sounds.backgroundMusic.play(); }function onUpdate() { if(scene.timer &gt; Math.random() * timeBetweenDucks + 1 &amp;&amp; parseInt(scenes.gui.objects.money.text) &gt;= duckCost) //create new duck { var newduck = scene.objectAdd(&quot;duck_&quot; + duckCount, &quot;ducky&quot;, new Vector(-4.379,1.016,-4.925), new Rotation(0,-90,0), new Vector(0.747,0.747,0.747)); //create a new duck object duckCount++; scene.timer = 0; scenes.gui.objects.money.text = parseInt(scenes.gui.objects.money.text) ­ duckCost; }if(parseInt(scenes.gui.objects.money.text) &lt; duckCost) { scenes.gui.objects.gameOver.visible = true; } }12If you run the code at this point you will find ducks get created inside the box at the left end of the conveyor.To get the ducks moving, we will turn on some physics. This can be added to the actual duck mesh so that each instance of a duck object gets the script automatically embedded. To do this, find the ducky mesh in the mesh tab for scene_2, right-click on it and select Edit Default Script.Now type in the ducky code as follows. Comments have been included between the lines to explain the code. Don't type these in as script!var duckType = 0; //1 = thermoplastic, 0 = thermoset var duckPlastic = &quot;&quot;; function onInit()Creating A Serious Game with DXStudio13{NoteThis next part of the code sets up the physics for each duck object. If you have a look in the Mesh Editor at the duck mesh you will see a large sphere around the duck. This is the physics element and it is called DXPHYSICS. The physics is therefore calculated on this sphere rather than the complex duck shape.object.physics.active = true; object.physics.enable = true; object.physics.type = &quot;character&quot;; object.physics.mass = 1.0; object.physics.friction = 0; object.physics.restitution = 0.8; object.physics.applyCentralImpulse(new Vector(1,0,0)); object.shadowDynamicCast = true;NoteThis next part of code randomly assigns ducks to be thermoplastic or thermoset. The variable duckType will equal 1 if the duck is thermoplastic and 0 if it is thermoset. In addition each duck has a string called duckPlastic which stores the name of the plastic the duck is made from. We will see this list of strings later in the document script.if(Math.random() * 10 &lt; 5) //half ducks are thermoset { duckType = 1; duckPlastic = system.script.thermoplastics[ Math.floor( Math.random() * (system.script.thermoplastics.length - 1))]; } else { duckPlastic = system.script.thermosets[ Math.floor( Math.random() * (system.script.thermosets.length - 1))]; }NoteNow a text label is added which will appear above the duck to display the plastic type as text.//create plastic label for over the head var label = scene.objectAdd(&quot;label&quot; +14object.id,&quot;flattext&quot;); label.text = duckPlastic; label.pos = object.pos; label.rot = object.rot; label.textFont=&quot;font_1&quot;; label.textSize=0.2; label.color = new Color(&quot;#ffffff&quot;); label.ui.textBackgroundCol = new Color(&quot;#000000&quot;); label.ui.textBorderCol = new Color(&quot;#ffffff&quot;); label.attach(object.id, &quot;&quot;, true, false, true); label.offsetPos = new Vector(0,0.65,0); label.offsetRot = new Rotation(0,90,0); label.textAlign=&quot;center&quot;; }NoteIf you examine scene_2 you will see a large effect cube around the furnace. This is used to determine when the duck enters the furnace. If the duck is thermoplastic the duck on top of the furnace (bigduck) gets bigger. If it is thermoset, the duck on top gets smaller and is set on fire.function onEffectObjectEnter(effectObjectId) { if(effectObjectId == &quot;furnaceCube&quot;) { if(object.script.duckType == 1) { scene.objects.bigduck.scale = new Vector( scene.objects.bigduck.scale.x + 0.1, scene.objects.bigduck.scale.y + 0.1, scene.objects.bigduck.scale.z + 0.1); } else { scene.objects.fire.emitter.active = true; scene.objects.bigduck.script.onFire = true; } scene.objectRemove(object.id); scene.objectRemove(&quot;label&quot; + object.id); } }NoteBecause the player will not want thermoset ducks to enter the furnace, they need a way to remove them. This next bit of code allows the playerCreating A Serious Game with DXStudio15to click on a duck to remove it. This click applies a physics impulse to the duck and flings it towards the back of the factory. At the same time a cute rubber ducky sound effect plays and the player gets \$5 credit if they have removed a thermoset duck.function onClick() { object.physics.applyCentralImpulse(new Vector (0, Math.random() * 3 + 3,Math.random() * 4 + 4)); scene.sounds.duckie.play(); if(object.script.duckType == 0) //you flicked off the correct duck get some money back { scenes.gui.objects.money.text = parseInt(scenes.gui.objects.money.text) + 5; } }NoteIn the original Plastic Heating game the molecular structure of the different plastics is shown to the player. We are replicating this here with a magnifying glass which appears on the screen when the player puts their mouse over a duck. These next 3 functions cause the correct molecular images to appear on the screen and place the magnifying glass under the position of the mouse.function onHoverBegin() { scenes.gui.objects.magnify.visible = true; scenes.gui.objects.magnify.pos = new Vector(system.ui.mouse.x, system.ui.mouse.y,1); if( object.script.duckType == 0 ) { scenes.gui.objects.thermoset.visible = true; scenes.gui.objects.thermoplastic.visible = false; } else { scenes.gui.objects.thermoplastic.visible = true; scenes.gui.objects.thermoset.visible = false; } } function onHoverEnd() { scenes.gui.objects.magnify.visible = false; } function onMouseMove()16{ scenes.gui.objects.magnify.pos = new Vector(system.ui.mouse.x, system.ui.mouse.y,1); }This is all the code you need to put into the ducky mesh. However before this will run there is some other scripts that this relies on. The first needs to be entered into the document script. It is two arrays of strings with the names of different plastics. These are the strings which appear over the heads of each duck in the scene. Type this code into the document script:var thermoplastics = new Array( &quot;Acrylonitrile butadiene styrene&quot;, &quot;Acrylic&quot;, &quot;Celluloid&quot;, &quot;Cellulose acetate&quot;, &quot;Ethylene-Vinyl Acetate&quot;, &quot;Ethylene vinyl alcohol&quot;, &quot;Fluoroplastics&quot;, &quot;Ionomers&quot;, &quot;Kydex&quot;, &quot;Liquid Crystal Polymer&quot;, &quot;Polyacetal&quot;, &quot;Polyacrylates&quot;, &quot;Polyacrylonitrile&quot;, &quot;Polyamide&quot;, &quot;Polyamide-imide&quot;);var thermosets = new Array( &quot;Vulcanized rubber&quot;, &quot;Bakelite&quot;, &quot;Urea-formaldehyde foam&quot;, &quot;Melamine resin&quot;, &quot;Epoxy resin&quot;, &quot;Polyimides&quot;);These are just some examples of different thermoset and thermoplastics. This list was taken from Wikipedia. Finally you need to program the bigduck to increase in size, to catch on fire and to cash in when it gets to a certain size. Enter this code as the script for bigduck.var onFire = false;Creating A Serious Game with DXStudio17function onUpdate() { if(object.scale.x &gt; 1) { object.scale = new Vector(0.1,0.1,0.1); scenes.gui.objects.money.text = parseInt(scenes.gui.objects.money.text) + 150; scene.sounds.cash_register_x.play(); }if(onFire) { object.scale = new Vector(object.scale.x - 0.005, object.scale.y - 0.005, object.scale.z - 0.005);if(object.scale.x &lt; 0.1) { onFire = false; scene.objects.fire.emitter.active = false; } } }And that is that! Save everything and run the scene. You should now get plastic ducks moving across the conveyor into the furnace. Click on a duck to remove it from the conveyor.18Scene Two and Three: The Tutorials (Demonstration and Supervision)In the previous section we created a playable game. We can use this scene to create the tutorial which will demonstrate and supervise the game play to the player. Start by going to the scenes tab, right clicking on scene_2 and exporting the scene. Call it tutorial.dxscene. Then in the same layers tab add a new scene and browse and select the previously exported tutorial.dxscene. This just creates a copy of scene_2. In the layers tab, set the current scene to the tutorial scene. This will ensure it is the scene running when you startup the program.Creating A Serious Game with DXStudio19In the tutorial scene the duck tutor will return to give the player instructions. First of all the game should run with the duck tutor in control and the player should not be able to do anything until prompted. At the very top of the tutorial scene script add:var playerControl = false;Then in the ducky script (the one in the tutorial scene ­ don't touch the scene_2 scene anymore!!) put this line of code at the beginning of the onClick, onHoverBegin, onHoverEnd and onMouseMove functions:if(!scene.script.playerControl) return;When you run the tutorial scene the player should not be able to interact with the ducks. This is what you want in the first part of the tutorial. Enter the Tutor Duck The Tutor Duck will just be a copy of the ducky mesh. In the tutorial scene meshes tab, right click on ducky and make a duplicate. Rename this to tutorduck (by right clicking on it) and then edit the default script and delete all the contents. To drop Tutor Duck into the scene just drag the tutorduck mesh into the 3D window. Position the duck right at the back of the scene with its y position = 1. This will be the starting location of the duck when the scene starts up.20We will now write a script for the duck to follow that tells the player about the game. For this next part you will need to add some sound files to the tutorial scene. These are available from http://www.penslayer.com/models/tutor1.wav ... tutor6.wav. Next, position the camera in the tutorial to look down on the scene. We are going to add some waypoints for the Tutor Duck to follow while he talks to the player. In the objects area click on the little green X and add a waypoint. Move this waypoint up to the back of the scene. Add six waypoints in total and place them as shown in the following image.213465In addition add 6 effect cubes and place one around each of the waypoints. Rename the effect cubes `tutorspeak1', `tutorspeak2', etc. Now select waypoint_1 and SHIFT select waypoint_2 so they are both selected and highlighted in blue. Then right click on these and select WAYPOINT | Link [waypoint_1] -&gt; [waypoint_2]. This creates a one way path between these locations. Create paths between all the waypoints now.NoteThis tutorials has been created with version 2.3.16 (beta). It should work fine with version 2.3. As of this version waypoints only work if they areCreating A Serious Game with DXStudio21all in the same plane. When you add your waypoints be sure they are all at y = 1 ­ the same for the Tutor Duck.The following code should be entered as the Tutor Duck's script, replacing the current script.var var var var var currentWP = 1; talking = 0; walking = false; numWP = 6; stage = 0; //0 - start of tutorial, //1 - start thermoplastic ducks coming out, //2 - start thermoset ducks coming out, //3 - randomize ducks and allow //player to click to flick themNoteOn initialization the first part of the Tutor Duck's path is setup. It will travel from it's starting position to the first waypoint. We set a boolean named walking to true to keep track of when the duck is moving along a path. When it is not moving we can program it to do something else.function onInit() { object.path.createViaWaypoints(scene.objects.find( &quot;waypoint_&quot; + currentWP).pos, new Vector(0.1,0.1,0.1)); object.path.followAutoMoveSpeed=5.0; object.path.followBegin(); walking = true; }NoteTo trigger the events occurring at each waypoint we've put an effect cube around them. When the Tutor Duck enters an effect cube it triggers the next function which can then be used to progress the tutorial. This tutorial has a number of stages. The first is the duck talking without any ducks on the conveyor. The second is of thermoplastic ducks going along the conveyor, the third is thermoset ducks and finally the game is open so the player can click the ducks off the conveyor. Because we want the player to take notice of the Tutor Duck we turn off the ability to click on the little ducks while it is talking.22function onEffectObjectEnter(effectObjectId) { if(effectObjectId == &quot;tutorspeak2&quot;) { stage = 1; } else if(effectObjectId == &quot;tutorspeak4&quot;) { stage = 2; } else if(effectObjectId == &quot;tutorspeak6&quot;) { stage = 3; scene.script.playerControl = true; } scene.sounds.find(&quot;tutor&quot; + currentWP).play(); talking = scene.sounds.find(&quot;tutor&quot; + currentWP).duration; walking = false; //reset time so we can time the sound file playing object.timer = 0; } function onEffectObjectLeave(effectObjectId) { //remove this effect cube so it doesn't trigger anymore scene.objectRemove(scene.objects.find(effectObjectId)); }NoteThe basis for the Tutor Duck's script is this update function. It ensures the Tutor Duck moves between the waypoints each time it is finished playing a speech file.function onUpdate() { if(talking &lt; object.timer &amp;&amp; !walking &amp;&amp; currentWP &lt; numWP) //go to next waypoint { currentWP++; object.path.createViaWaypoints(scene.objects.find( &quot;waypoint_&quot; + currentWP).pos, new Vector(0.1,0.1,0.1)); object.path.followAutoMoveSpeed=5.0; object.path.followBegin(); walking = true; } }Creating A Serious Game with DXStudio23The last thing to do before the basic tutorial is ready to go is hook up the tutorial stages to the scene and ducky scripts. In the onInit() of the ducky script update the code with the part shown in bold below (ensure you edit the ducky script of the tutorial scene NOT scene_2).object.physics.applyCentralImpulse(new Vector(1,0,0)); object.shadowDynamicCast = true; if(objects.tutorduck_1.script.stage != 0) { if( (Math.random() * 10 &lt; 5 || objects.tutorduck_1.script.stage == 1) &amp;&amp; objects.tutorduck_1.script.stage != 2) //half ducks are thermoset //except during stage 1 of tutorial { duckType = 1; duckPlastic = system.script.thermoplastics[ Math.floor( Math.random() * (system.script.thermoplastics.length ­ 1))]; } else { duckPlastic = system.script.thermosets[ Math.floor( Math.random() * (system.script.thermosets.length - 1))]; } } //create plastic label for over the head var label = scene.objectAdd(&quot;label&quot; + object.id,&quot;flattext&quot;); label.text = duckPlastic;Now update the first if statement in the tutorial script onUpdate() function to this:if(scene.timer &gt; Math.random() * timeBetweenDucks + 1 &amp;&amp; parseInt(scenes.gui.objects.money.text) &gt;= duckCost &amp;&amp; objects.tutorduck_1.script.stage) //create new duckAnd that is that! Save and run this tutorial level. Its been placed first in the layer and scene ordering so it will run straight away. Of course this tutorial can have lots of extra information added to it.... But I'll leave that up to you. ;)Putting it all togetherTo tie all the scenes together we will create a simple startup menu. This is purely to demonstrate to you how to switch between scenes. First add a new scene to the project and call it &quot;startup&quot;. In this scene at a title for your menu and three text labels which the player can click on to go to each scene. It doesn't have to be fancy. Just functional.24Next you need to create 4 layers. In layer_1 put the startup scene, in layer_2 scene_1, in layer_3 the tutorial scene and in layer 4 scene_2.Next in the document code create an onInit() function and turn off all the layers except the startup one, thus:Creating A Serious Game with DXStudio25function onInit() { layers.layer_2.visible = false; layers.layer_3.visible = false; layers.layer_4.visible = false; }The document script is the highest level one with the arrays of plastic types we created earlier. Now to link each of the items in the startup menu with a layer, enter script for each one that makes the appropriate layer visible and turns off the menu like this:function onClick() { layers.layer_2.visible = true; layers.layer_1.visible = false; }You will need to do this for all your menu items. Now when the program starts up the player will see the menu and be able to select from it. You now have the basic structure of a serious game and along the way we've covered a lot of the DXStudio functionality. I hope this gives you a good head start into using DXStudio for creating your own games.Challenge Exercises1. Modify each layer such that pressing the ESC key will take the player back to the startup menu. 2. Modify the menu so the player can only progress to each successive scene in order. 3. Add extra information to the tutorial layer which explains to the player the reward system of paying for each duck coming in and getting a bonus for each megalithic duck created. Add your own sound files and new waypoints. 4. If the player is doing well, have the game play scene get harder as time goes by. Do this by a. Having the conveyor belt speed up each time the player achieves another \$100. b. Causing the magnifying glass to go away when the player achieves \$300.26References2008 de Byl. P, Designing Games-Based Embedded Authentic Learning Experiences, in Handbook of Research on Effective Electronic Gaming in Education, IGI Press.`

Information

26 pages

Find more like this

Report File (DMCA)

Our content is added by our users. We aim to remove reported files within 1 working day. Please use this link to notify us:

Report this file as copyright or inappropriate

345644

BETA