#250 add kindle and refactor assets

app/assets/assets.json

@@ -0,0 +1,79 @@
+{
+  "music": {
+     "msx_stage"          : {}
+    ,"msx_stage_critical" : {}
+    ,"msx_stage_results"  : {}
+  },
+  "sound_effects" : [
+     "sfx_confirm"
+    ,"sfx_select"
+    ,"sfx_swap"
+    ,"sfx_countdown_blip"
+    ,"sfx_countdown_ding"
+    ,"sfx_drop0"
+    ,"sfx_drop1"
+    ,"sfx_drop2"
+    ,"sfx_drop3"
+    ,"sfx_pop0"
+    ,"sfx_pop1"
+    ,"sfx_pop2"
+    ,"sfx_pop3"
+  ],
+  "images": [
+     "bg_blue"
+    ,"logo"
+    ,"bg_green"
+    ,"bg_purple"
+    ,"menu_bg"
+    ,"menu_frame_content"
+    ,"menu_frame_corner"
+    ,"menu_item_column" 
+    ,"menu_item_content"
+    ,"menu_cursor"
+    ,"menu_pause_cursor"
+    ,"menu_pause"
+    ,"pause"
+    ,"puzzle_menu"
+    ,"playfield_vs_frame"
+    ,"playfield_vs_bg"
+    ,"mode_puzzle_bg"
+    ,"playfield_wall0"
+    ,"playfield_wall1"
+    ,"bauble_times"
+    ,"font"
+  ],
+  "spritesheets" : {
+     "garbage_thumb"      : {"size": "48x32" , "frames": 4}
+    ,"ints_small"         : {"size": "16x16" , "frames": 18}
+    ,"ints_large"         : {"size": "16x24" , "frames": 18}
+    ,"playfield_cursor"   : {"size": "76x44" , "frames": 2}
+    ,"playfield_countdown": {"size": "124x76", "frames": 4}
+    ,"panels"             : {"size": "32x32" , "frames": 56}
+    ,"garbage"            : {"size": "32x32" , "frames": 14}
+    ,"star_counter"       : {"size": "32x32" , "frames": 12}
+    ,"bauble"             : {"size": "6x32"  , "frames": 6}
+    ,"bauble_num"         : {"size": "12x18" , "frames": 10}
+    ,"bauble_num_small"   : {"size": "10x18" , "frames": 10}
+    ,"particle_clear"     : {"size": "16x16" , "frames": 32}
+    ,"particle_garbage"   : {"size": "32x32" , "frames": 4}
+    ,"mode_vs_level"      : {"size": "28x28" , "frames": 20}
+    ,"zephyr" : {"size": "48x48" , "frames": 84, "animations": {
+       "stand"    : [0,1,2,3,4,5,6,7]
+      ,"attack"   : [12,13,14,15,16,17,18,19,20]
+      ,"attacked" : [24,25,26,27,28,29,30,31,32]
+      ,"lost"     : [36,37,38,39,40,41,42,43,44,45,46,47]
+      ,"losing"   : [48,49,50,51]
+      ,"charge"   : [60,61,62,63,64,65]
+      ,"won"      : [72,73,74,75,76,77,78,79,80,81]
+    }},
+    "kindle" : {"size": "48x48" , "frames": 84, "animations": {
+       "stand"    : [0,1,2,3,4,5,6,7]
+      ,"attack"   : [12,13,14,15,16,17,18,19]
+      ,"attacked" : [24,25,26,27,28,29,30,31,32]
+      ,"lost"     : [36,37,38,39,40,41,42,43,44,45,46,47]
+      ,"losing"   : [48,49,50,51,52,53,54,55]
+      ,"charge"   : [60,61,62,63,64,65]
+      ,"won"      : [72,73,74,75,76,77,78,79,80,81]
+    }}
+  }
+}

src/renderer/components/character.ts

@@ -1,4 +1,5 @@
-import game from 'core/game'
+import assets from 'core/assets'
+import game   from 'core/game'
 
 export default class ComponentCharacter {
   private playfield_num     : number
@@ -14,6 +15,7 @@ export default class ComponentCharacter {
   private stopped           : boolean
   public  current_animation : string
   private last_animation    : string
+  private name : string  
   /** 
    * A Sprite is added to the object and several animation objects
    * 
@@ -22,10 +24,11 @@ export default class ComponentCharacter {
    * @param {integer} y default 0
    * @param {integer} pi playfield number
    */
-  create(sprite, x = 0, y = 0, pi) {
+  create(name, x = 0, y = 0, pi) {
+    this.name = name
     this.playfield_num = pi
     // sprite creation
-    this.sprite = game.add.sprite(x, y, sprite, 0)
+    this.sprite = game.add.sprite(x, y, name, 0)
     this.sprite.anchor.setTo(0.5)
     this.sprite.scale.set(2)
     this.sprite.smoothed = false
@@ -34,17 +37,19 @@ export default class ComponentCharacter {
 
     if (pi == 1) {
       this.sprite.scale.x = -2
-      this.x -= -60
+      this.x += 40
+    } else {
+      this.x -= 40
     }
 
     this.animations = new Map()
-    this.add_animation("stand",     8,  0)
-    this.add_animation("attack",    9,  12, "stand")
-    this.add_animation("attacked",  9,  24, "stand")
-    this.add_animation("lost",      12, 36, "", true)
-    this.add_animation("losing",    4,  48)
-    this.add_animation("charge",    6,  60)
-    this.add_animation("won",       10, 72, "", true)
+    this.add_animation(this.name, "stand")
+    this.add_animation(this.name, "attack"  , "stand")
+    this.add_animation(this.name, "attacked", "stand")
+    this.add_animation(this.name, "lost", "", true)
+    this.add_animation(this.name, "losing")
+    this.add_animation(this.name, "charge")
+    this.add_animation(this.name, "won", "", true)
 
     this.tick_counter = 0
     this.frame_counter = 0
@@ -57,22 +62,19 @@ export default class ComponentCharacter {
    * Add an animation object with information to the Map object inside this character,
    * the defined name can then be called from the Map to return the animation object
    * 
-   * @param {String} name simple name to be called by the animations map
+   * @param {string} character key
+   * @param {string} name simple name to be called by the animations map
    * @param {integer} hframes amount of horizontal frames to run through
    * @param {integer} offset amount of offset to start the hframes counting from
    * @param {String} return_to_animation the animation.name to return to after finishing the animation
    * @param {boolean} stop_animation if the animation cycle should in general stop
    */
-  add_animation(name, hframes, offset, return_to_animation = "", stop_animation = false) {
+  add_animation(key, name, return_to_animation = "", stop_animation = false) {
     const animation = {
-      frames           : [],
+      frames           : assets.spritesheets[key].animations[name],
       stop_animation   : stop_animation,
       parent_animation : return_to_animation
     }
-
-    let ct = 0;
-    for (let frame = offset; frame < offset + hframes; frame++)
-      animation.frames[ct++] = frame
     this.animations.set(name, animation)
   }
 

src/renderer/components/playfield.ts

@@ -169,12 +169,6 @@ export default class Playfield {
     //this.score_lbl.create()
     // for mode_puzzle, couting all swaps
     this.swap_counter = 0;
-    this.character.create(
-      "zephyr",
-      game.world.centerX - 30,
-      game.world.centerY - 100,
-      this.pi
-    );
   }
 
   get clear(){
@@ -197,6 +191,12 @@ export default class Playfield {
     this.cursor.create(this)
     if (this.has_ai) { this.ai.create(this, this.cursor) }
     this.wall.create(this,this.x,this.y)
+    this.character.create(
+      (this.pi === 0) ? 'zephyr' : 'kindle',
+      game.world.centerX,
+      game.world.centerY - 100,
+      this.pi
+    );
   }
   create_stack(data){
     this._stack = []

src/renderer/core/assets.ts

@@ -0,0 +1,75 @@
+import * as fs    from 'fs'
+import game  from 'core/game'
+import Store from 'common/store'
+const store = new Store()
+
+class Assets {
+  private static _instance: Assets
+  private dir : string
+  private assets : {
+    music         : {},
+    sound_effects : Array<string>,
+    images        : Array<string>,
+    spritesheets  : {}
+  }
+
+  public static get Instance(){
+    return this._instance || (this._instance = new this())
+  }
+
+  constructor(){
+    this.dir = store.get('asset-dir')
+  }
+
+  preload(){
+    game.load.json('assets', this.json)
+  }
+
+  load(){
+    this.assets = game.cache.getJSON('assets')
+  }
+
+  get music()        { return this.assets.music }
+  get sound_effects(){ return this.assets.sound_effects }
+  get images()       { return this.assets.images }
+  get spritesheets() { return this.assets.spritesheets }
+
+  /**
+   * @param type either music, sound_effects, image, spritesheet
+   * @param name name of the asset
+   * @returns the path based on type
+   */ 
+  path(kind : string, name : string) {
+    const filename = this.filename(kind,name)
+    const external = this.dir    +  '/' + filename
+    const internal = './assets'  +  '/' + filename
+    if (fs.existsSync(external)) {
+      return external
+    } else {
+      return internal
+    }
+  }
+
+  get json(){
+    const filename = 'assets.json'
+    const external = this.dir   + '/' + filename
+    const internal = './assets' + '/' + filename
+    if (fs.existsSync(external)) {
+      return external
+    } else {
+      return internal
+    }
+  }
+
+  filename(kind : string, name : string){
+    switch (kind) {
+      case "music"         : return `music/${name}.mp3`
+      case "sound_effects" : return `sound_effects/${name}.ogg`
+      case "images"        : return `images/${name}.png`
+      case "spritesheets"  : return `spritesheets/${name}.png`
+    }
+  }
+}
+
+const assets = Assets.Instance
+export default assets