Skip to content

Commit 3395741

Browse files
committed
Minor updates to platformer tutorial
1 parent 9072728 commit 3395741

File tree

4 files changed

+57
-4
lines changed

4 files changed

+57
-4
lines changed
86.8 KB
Loading
37.5 KB
Loading

docs/learn/tutorial/01_platformer/page.html

Lines changed: 57 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -114,6 +114,12 @@ <h3 class="black">Creating a level</h3>
114114

115115
<img src="images/h.png" class="img-normal"></img>
116116

117+
<p>If you are having some trouble completing this part of the tutorial you can download the project fileou can download the <a class="underline" href="steps/a.nsp">project file</a> or open it on the <a class="underline" href="https://www.nunustudio.org/editor/editor?nsp=https://nunustudio.org/learn/tutorial/01_platformer/steps/a.nsp">Web Editor</a>.</p>
118+
119+
<!--<div>
120+
<canvas id="step_c" style="margin-left:auto; margin-right:auto; display: block;"></canvas>
121+
</div>-->
122+
117123
<!--Player control-->
118124
<h3 class="black">Player control</h3>
119125

@@ -249,6 +255,11 @@ <h3 class="black">Player control</h3>
249255
camera.position.y = player.body.position.y + 2;
250256
}</code></pre>
251257

258+
<p>If you are having some trouble completing this part of the tutorial you can download the project fileou can download the <a class="underline" href="steps/b.nsp">project file</a> or open it on the <a class="underline" href="https://www.nunustudio.org/editor/editor?nsp=https://nunustudio.org/learn/tutorial/01_platformer/steps/b.nsp">Web Editor</a>.</p>
259+
260+
<!--<div>
261+
<canvas id="step_c" style="margin-left:auto; margin-right:auto; display: block;"></canvas>
262+
</div>-->
252263

253264
<h3 class="black">Enemies</h2>
254265
<p>We got our player moving but we still cant die, and dont have any obstacles to avoid or enemies to kill. Dont worry we will take care of that now.</p>
@@ -369,6 +380,12 @@ <h3 class="black">Enemies</h2>
369380

370381
<p>You should have now a moving enemy in your game, duplicate the created script and attach it to other object to make them move as well, try to create a moving platform like the ones in super mario games.</p>
371382

383+
<p>If you are having some trouble completing this part of the tutorial you can download the project fileou can download the <a class="underline" href="steps/c.nsp">project file</a> or open it on the <a class="underline" href="https://www.nunustudio.org/editor/editor?nsp=https://nunustudio.org/learn/tutorial/01_platformer/steps/c.nsp">Web Editor</a>.</p>
384+
385+
<!--<div>
386+
<canvas id="step_c" style="margin-left:auto; margin-right:auto; display: block;"></canvas>
387+
</div>-->
388+
372389
<h3 class="black">Gamepad input</h3>
373390
<p>To add support for gamepad input we can create a Gamepad object in our script, the gamepad object allows us to get input from an USB gamepad, different gamepads might have different button mapping you can use <a class="underline" href="http://html5gamepad.com/">this website</a> to check you gamepad button mapping. To check the name of other buttons in the Gamepad check the <a class="underline" href="../../../docs/classes/Gamepad.html">Gamepad API documentation</a>.</p>
374391

@@ -391,14 +408,50 @@ <h3 class="black">Gamepad input</h3>
391408
}</code></pre>
392409

393410
<h3 class="black">Put the pieces together</h3>
394-
<p>Now we already have all basic blocks to make a complete platformer level lets take them and build complete level with actuall game assets. To make it easier to overview our level we can use the 2D editor mode (can be toggled in the top right corner of the scene explorer).</p>
411+
<p>Now we already have all basic blocks to make a complete platformer level lets take them and build complete level with actual game assets and tweak gameplay a little bit. To make it easier to overview our level we can use the 2D editor mode (can be toggled in the top right corner of the scene explorer).</p>
395412

396-
<img src="images/n.png" class="img-normal"></img>
413+
<img src="images/n.png" class="img-big"></img>
397414

398-
<p>Were almost done now its the time to add textures and decoration to our level, this is a good time to experiment to use some of the decoration objects like Particles, LensFlare, etc. I haven't done much regarding decoration simply added a couple of materials and colored everything up.</p>
415+
<p>Were almost done now its the time to add textures and decoration to our level, this is a good time to experiment to use some of the decoration objects like Particles, LensFlare, etc. I haven't done much regarding decoration simply added a couple of materials and colored everything up, added a LensFlare effect and some particles floating around the level.</p>
399416

400417
<img src="images/p.png" class="img-normal"></img>
401418

419+
<p>Since the player movement was also a little slow i tweaked it a bit by adding the option to run using the keyboard shift key and tweaking the movement to have an acceleration curve instead of instant move.</p>
420+
<p>At the beginning of this tutorial i was planning to change the cube for a ball or lock its rotation but since i find it kinda of funny to see the cube tumbling around so i will leave it like this.</p>
421+
422+
<pre><code>function update()
423+
{
424+
425+
...
426+
427+
var velocity = 6;
428+
var acceleration = 0.6;
429+
430+
if(Keyboard.keyPressed(Keyboard.SHIFT))
431+
{
432+
velocity = 8;
433+
acceleration = 1;
434+
}
435+
436+
if(Keyboard.keyPressed(Keyboard.A) || gamepad.buttonPressed(Gamepad.LEFT))
437+
{
438+
if(player.body.velocity.x > -velocity)
439+
{
440+
player.body.velocity.x -= acceleration;
441+
}
442+
}
443+
if(Keyboard.keyPressed(Keyboard.D) || gamepad.buttonPressed(Gamepad.RIGHT))
444+
{
445+
if(player.body.velocity.x < velocity)
446+
{
447+
player.body.velocity.x += acceleration;
448+
}
449+
}
450+
451+
...
452+
453+
}</code></pre>
454+
402455
<h3 class="black">Final result</h3>
403456
<p>If you were able to make it this far congratulations, you have created an awseome platformer game. This should cover all the basic aspects for platformer games. If you have any doubt about any of the steps in the tutorial, feel free to ask me about it.</p>
404457
<p>You can try the final result of this tutorial bellow (wasd keys to move), you can also download the <a class="underline" href="platformer.nsp">project file</a> or open it on the <a class="underline" href="https://www.nunustudio.org/editor/editor?nsp=https://nunustudio.org/learn/tutorial/01_platformer/platformer.nsp">Web Editor</a>.</p>
@@ -421,4 +474,4 @@ <h3 class="black">Final result</h3>
421474
</div>
422475
</footer>
423476
</body>
424-
</html>
477+
</html>
20.2 KB
Binary file not shown.

0 commit comments

Comments
 (0)