Skip to content

Commit

Permalink
Minor updates to platformer tutorial
Browse files Browse the repository at this point in the history
  • Loading branch information
tentone committed Aug 25, 2017
1 parent 9072728 commit 3395741
Show file tree
Hide file tree
Showing 4 changed files with 57 additions and 4 deletions.
Binary file modified docs/learn/tutorial/01_platformer/images/n.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified docs/learn/tutorial/01_platformer/images/p.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
61 changes: 57 additions & 4 deletions docs/learn/tutorial/01_platformer/page.html
Expand Up @@ -114,6 +114,12 @@ <h3 class="black">Creating a level</h3>

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

<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>

<!--<div>
<canvas id="step_c" style="margin-left:auto; margin-right:auto; display: block;"></canvas>
</div>-->

<!--Player control-->
<h3 class="black">Player control</h3>

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

<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>

<!--<div>
<canvas id="step_c" style="margin-left:auto; margin-right:auto; display: block;"></canvas>
</div>-->

<h3 class="black">Enemies</h2>
<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>
Expand Down Expand Up @@ -369,6 +380,12 @@ <h3 class="black">Enemies</h2>

<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>

<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>

<!--<div>
<canvas id="step_c" style="margin-left:auto; margin-right:auto; display: block;"></canvas>
</div>-->

<h3 class="black">Gamepad input</h3>
<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>

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

<h3 class="black">Put the pieces together</h3>
<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>
<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>

<img src="images/n.png" class="img-normal"></img>
<img src="images/n.png" class="img-big"></img>

<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>
<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>

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

<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>
<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>

<pre><code>function update()
{

...

var velocity = 6;
var acceleration = 0.6;

if(Keyboard.keyPressed(Keyboard.SHIFT))
{
velocity = 8;
acceleration = 1;
}

if(Keyboard.keyPressed(Keyboard.A) || gamepad.buttonPressed(Gamepad.LEFT))
{
if(player.body.velocity.x > -velocity)
{
player.body.velocity.x -= acceleration;
}
}
if(Keyboard.keyPressed(Keyboard.D) || gamepad.buttonPressed(Gamepad.RIGHT))
{
if(player.body.velocity.x < velocity)
{
player.body.velocity.x += acceleration;
}
}

...

}</code></pre>

<h3 class="black">Final result</h3>
<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>
<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>
Expand All @@ -421,4 +474,4 @@ <h3 class="black">Final result</h3>
</div>
</footer>
</body>
</html>
</html>
Binary file modified docs/learn/tutorial/01_platformer/platformer.nsp
Binary file not shown.

0 comments on commit 3395741

Please sign in to comment.