improve platformer example

- use sprite atlas
- fix weapon recoil
- code cleanup

examples/platformer/data/gameTileData.tmx → examples/platformer/data/gameLevelData.tmx

@@ -1,9 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <map version="1.10" tiledversion="1.11.0" orientation="orthogonal" renderorder="right-down" width="256" height="64" tilewidth="16" tileheight="16" infinite="0" nextlayerid="3" nextobjectid="1">
  <editorsettings>
-  <export target="../gameTileData.js" format="js"/>
+  <export target="../gameLevelData.js" format="js"/>
  </editorsettings>
- <tileset firstgid="1" source="gameTileData.tsx"/>
+ <tileset firstgid="1" source="gameLevelData.tsx"/>
  <layer id="2" name="Tile Layer 2" width="256" height="64" tintcolor="#4d7caf">
   <data encoding="csv">
 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,

examples/platformer/game.js

@@ -11,11 +11,26 @@
 // show the LittleJS splash screen
 setShowSplashScreen(true);
 
-let score, deaths;
+let spriteAtlas, score, deaths;
 
 ///////////////////////////////////////////////////////////////////////////////
 function gameInit()
 {
+    // create a table of all sprites
+    spriteAtlas =
+    {
+        // large tiles
+        'circle': tile(0),
+        'crate':  tile(2),
+        'player': tile(3),
+        'enemy':  tile(5),
+        'coin':   tile(6),
+
+        // small t
+        'gun':    tile(2,8),
+        'grenade':tile(3,8),
+    };
+
     // enable touch gamepad on touch devices
     touchGamepadEnable = true;
 

examples/platformer/gameCharacter.js

@@ -210,15 +210,17 @@ class Character extends GameObject
         // update mirror
         if (moveInput.x && !this.dodgeTimer.active())
             this.mirror = moveInput.x < 0;
-
-        // set tile to use
-        const tile = this.isDead() ? 3 : 
-            this.climbingLadder || this.groundTimer.active() ? 3 + 2*this.walkCyclePercent|0 : 4;
-        this.tileInfo.pos.x = tile * 16;
     }
 
     render()
     {
+        // update animation
+        const animationFrame = this.isDead() ? 0 :
+            this.climbingLadder || this.groundTimer.active() ?
+            2*this.walkCyclePercent|0 : 1;
+        const playerTile = spriteAtlas['player'];
+        this.tileInfo.pos.x = playerTile.pos.x + playerTile.size.x*animationFrame;
+
         let bodyPos = this.pos;
         if (!this.isDead())
         {

examples/platformer/gameEffects.js

@@ -255,19 +255,4 @@ class ParallaxLayer extends EngineObject
         // draw the parallax layer onto the main canvas
         mainContext.drawImage(this.canvas, pos.x, pos.y, scale.x, scale.y);
     }
-}
-
-///////////////////////////////////////////////////////////////////////////////
-// background decoration
-
-let sky;
-
-function initBackground()
-{
-    // create sky object with gradient and stars
-    sky = new Sky;
-
-    // create parallax layers
-    for (let i=3; i--;)
-        new ParallaxLayer(i);
 }

examples/platformer/gameLevel.js

@@ -8,12 +8,12 @@
 
 'use strict';
 
-const tileType_ladder      = -1;
-const tileType_empty       = 0;
-const tileType_solid       = 1;
-const tileType_breakable   = 2;
+const tileType_ladder    = -1;
+const tileType_empty     = 0;
+const tileType_solid     = 1;
+const tileType_breakable = 2;
 
-let player, playerStartPos, tileData, tileLayers, foregroundLayerIndex;
+let player, playerStartPos, tileData, tileLayers, foregroundLayerIndex, sky;
 let levelSize, levelColor, levelBackgroundColor, levelOutlineColor, warmup;
 
 const setTileData = (pos, layer, data)=>
@@ -27,9 +27,14 @@ function buildLevel()
     levelColor = randColor(hsl(0,0,.2), hsl(0,0,.8));
     levelBackgroundColor = levelColor.mutate().scale(.4,1);
     levelOutlineColor = levelColor.mutate().add(hsl(0,0,.4)).clamp();
-
     loadLevel();
-    initBackground();
+
+    // create sky object with gradient and stars
+    sky = new Sky;
+
+    // create parallax layers
+    for (let i=3; i--;)
+        new ParallaxLayer(i);
 
     // apply decoration to all level tiles
     const pos = vec2();

examples/platformer/gameObjects.js

@@ -66,7 +66,7 @@ class Crate extends GameObject
 {
     constructor(pos) 
     { 
-        super(pos, vec2(1), tile(2), (randInt(4))*PI/2);
+        super(pos, vec2(1), spriteAtlas['crate'], (randInt(4))*PI/2);
 
         this.color = hsl(rand(),1,.8);
         this.health = 5;
@@ -92,7 +92,7 @@ class Coin extends EngineObject
 {
     constructor(pos) 
     { 
-        super(pos, vec2(1), tile(6));
+        super(pos, vec2(1), spriteAtlas['coin']);
         this.color = hsl(.15,1,.5);
     }
 
@@ -127,7 +127,7 @@ class Enemy extends GameObject
 {
     constructor(pos) 
     { 
-        super(pos, vec2(.9,.9), tile(5));
+        super(pos, vec2(.9,.9), spriteAtlas['enemy']);
 
         this.drawSize = vec2(1);
         this.color = hsl(rand(), 1, .7);
@@ -185,7 +185,7 @@ class Grenade extends GameObject
 {
     constructor(pos) 
     {
-        super(pos, vec2(.2), tile(3,8));
+        super(pos, vec2(.2), spriteAtlas['grenade']);
 
         this.beepTimer = new Timer(1);
         this.elasticity   = .3;
@@ -218,7 +218,7 @@ class Grenade extends GameObject
         // draw additive flash exploding
         setBlendMode(true);
         const flash = Math.cos(this.getAliveTime()*2*PI);
-        drawTile(this.pos, vec2(2), tile(0, 16), hsl(0,1,.5,.2-.2*flash));
+        drawTile(this.pos, vec2(2), spriteAtlas['circle'], hsl(0,1,.5,.2-.2*flash));
         setBlendMode(false);
     }
 }
@@ -229,7 +229,7 @@ class Weapon extends EngineObject
 {
     constructor(pos, parent) 
     { 
-        super(pos, vec2(.6), tile(2,8));
+        super(pos, vec2(.6), spriteAtlas['gun']);
 
         // weapon settings
         this.fireRate      = 8;
@@ -263,7 +263,7 @@ class Weapon extends EngineObject
 
         // update recoil
         if (this.recoilTimer.active())
-            this.localAngle = lerp(this.recoilTimer.getPercent(), 0, this.localAngle);
+            this.localAngle = lerp(this.recoilTimer.getPercent(), this.localAngle, 0);
 
         this.mirror = this.parent.mirror;
         this.fireTimeBuffer += timeDelta;
@@ -274,8 +274,8 @@ class Weapon extends EngineObject
             {
                 // create bullet
                 sound_shoot.play(this.pos);
-                this.localAngle = -rand(.2,.15);
-                this.recoilTimer.set(.4);
+                this.localAngle = -rand(.2,.25);
+                this.recoilTimer.set(.1);
                 const direction = vec2(this.bulletSpeed*this.getMirrorSign(), 0);
                 const velocity = direction.rotate(rand(-1,1)*this.bulletSpread);
                 new Bullet(this.pos, this.parent, velocity, this.damage);
@@ -324,7 +324,7 @@ class Bullet extends EngineObject
         if (this.range < 0)
         {
             const emitter = new ParticleEmitter(
-                this.pos, 0, .2, .1, 50, PI, tile(0),  // pos, angle, emit info, tileInfo
+                this.pos, 0, .2, .1, 50, PI, spriteAtlas['circle'], // pos, emit info, tileInfo
                 rgb(1,1,.1), rgb(1,1,1),    // colorStartA, colorStartB
                 rgb(1,1,.1,0), rgb(1,1,1,0),// colorEndA, colorEndB
                 .1, .5, .1, .05, 0, // particleTime, sizeStart, sizeEnd, speed, angleSpeed

examples/platformer/index.html

@@ -12,5 +12,5 @@
 <script src=gamePlayer.js?192></script>
 <script src=gameEffects.js?192></script>
 <script src=gameLevel.js?192></script>
-<script src=gameTileData.js?192></script>
+<script src=gameLevelData.js?192></script>
 <script src=game.js?192></script>