sprites play animator

_pack.js

@@ -11,17 +11,19 @@ export default async function pack() {
   .then(_ => _.map(({name, ase}) => {
 
     let packs = ase.frames.map(frame => packer.add(frame.image))
+    let { tags } = ase
 
-    sprites.push({ name, packs })
+    sprites.push({ name, packs, tags })
   }))
 
 
 
 
   packer.pack()
 
-  sprites = sprites.map(({ name, packs }) => ({
+  sprites = sprites.map(({ name, packs, tags }) => ({
     name,
+    tags,
     packs: packs.map(_ => ({ frame: _.frame, packed: _.packed }))
   }))
 

content/out_0.json

@@ -1 +1 @@
-{"sprites":[{"name":"palette","packs":[{"frame":{"x":0,"y":0,"w":8,"h":8},"packed":{"x":0,"y":0,"w":8,"h":8}},{"frame":{"x":0,"y":0,"w":8,"h":8},"packed":{"x":8,"y":0,"w":8,"h":8}},{"frame":{"x":0,"y":0,"w":8,"h":8},"packed":{"x":0,"y":8,"w":8,"h":8}},{"frame":{"x":0,"y":0,"w":8,"h":8},"packed":{"x":16,"y":0,"w":8,"h":8}},{"frame":{"x":0,"y":0,"w":8,"h":8},"packed":{"x":0,"y":16,"w":8,"h":8}}]}]}
+{"sprites":[{"name":"palette","tags":[{"from":0,"to":0,"name":"1"},{"from":1,"to":1,"name":"2"},{"from":2,"to":2,"name":"3"},{"from":3,"to":3,"name":"4"},{"from":4,"to":4,"name":"5"}],"packs":[{"frame":{"x":0,"y":0,"w":8,"h":8},"packed":{"x":0,"y":0,"w":8,"h":8}},{"frame":{"x":0,"y":0,"w":8,"h":8},"packed":{"x":8,"y":0,"w":8,"h":8}},{"frame":{"x":0,"y":0,"w":8,"h":8},"packed":{"x":0,"y":8,"w":8,"h":8}},{"frame":{"x":0,"y":0,"w":8,"h":8},"packed":{"x":16,"y":0,"w":8,"h":8}},{"frame":{"x":0,"y":0,"w":8,"h":8},"packed":{"x":0,"y":16,"w":8,"h":8}}]}]}

src/assets/sprite.ts

@@ -0,0 +1,28 @@
+
+import { Vec2, Subtexture } from 'blah'
+
+export class Frame {
+  constructor(readonly image: Subtexture,
+              readonly duration: number) {}
+}
+
+export class Animation {
+
+  constructor(readonly name: string,
+              readonly frames: Array<Frame>) {}
+
+}
+
+
+export class Sprite {
+
+
+  constructor(readonly name: string,
+              readonly origin: Vec2,
+              readonly animations: Array<Animation>) {}
+
+  get(name: string) {
+    return this.animations.find(_ => _.name === name)
+  }
+
+}

src/components/animator.ts

@@ -0,0 +1,96 @@
+import { Component } from '../world'
+import { Time, Batch, Vec2, Mat3x2, Color } from 'blah'
+import { Sprite } from '../assets/sprite'
+import Content from '../content'
+
+
+export class Animator extends Component {
+
+  static make = (name: string) => new Animator(name)
+
+  constructor(readonly name: string) {
+    super()
+    this._sprite = Content.find_sprite(name)
+    this._animation_index = 0
+    this._frame_index = 0
+    this._frame_counter = 0
+  }
+
+  _sprite: Sprite
+  _animation_index: number
+  _frame_index: number
+  _frame_counter: number
+
+
+  scale = Vec2.one
+  offset = Vec2.zero
+
+  get sprite() {
+    return this._sprite
+  }
+
+  get animation() {
+
+    if (this._sprite && this._animation_index >= 0 && this._animation_index < this._sprite.animations.length) {
+      return this._sprite.animations[this._animation_index]
+    }
+    return undefined
+  }
+
+
+  play(animation: string, restart: boolean = false) {
+    for (let i = 0; i < this._sprite.animations.length; i++) {
+      if (this._sprite.animations[i].name === animation) {
+        if (this._animation_index !== i || restart) {
+          this._animation_index = i
+          this._frame_index = 0
+          this._frame_counter = 0
+        }
+        break
+      }
+    }
+  }
+
+
+  update() {
+    if (this._in_valid_state) {
+      let anim = this._sprite.animations[this._animation_index]
+      let frame = anim.frames[this._frame_index]
+
+      this._frame_counter += Time.delta
+
+      while (this._frame_counter >= frame.duration) {
+        this._frame_counter -= frame.duration
+
+        this._frame_index++;
+
+          if (this._frame_index >= anim.frames.length) {
+            this._frame_index = 0
+          }
+      }
+    }
+  }
+
+  render(batch: Batch) {
+    if (this._in_valid_state) {
+      batch.push_matrix(
+        Mat3x2.create_transform(this.entity.position.add(this.offset),
+                                 this._sprite.origin, this.scale, 0))
+
+      let anim = this._sprite.animations[this._animation_index]
+      let frame = anim.frames[this._frame_index]
+      batch.stex(frame.image, Vec2.zero, Color.white)
+      batch.pop_matrix()
+    }
+  }
+
+
+  get _in_valid_state() {
+    return this._sprite && 
+      this._animation_index >= 0 && 
+      this._animation_index < this._sprite.animations.length &&
+      this._frame_index >= 0 &&
+      this._frame_index < this._sprite.animations[this._animation_index].frames.length
+  }
+
+}

src/components/background.ts

@@ -0,0 +1,31 @@
+import { World, Component } from '../world'
+import { Vec2, Batch } from 'blah'
+import { Animator } from './animator'
+import Game from '../game'
+
+
+export class Background extends Component {
+
+  static make = (world: World, position: Vec2) => {
+
+    let en = world.add_entity(position)
+
+    let anim = en.add(Animator.make('palette'))
+    anim.play('4')
+
+    anim.scale = Vec2.make(Game.width / 8, Game.height / 8)
+
+    en.add(new Background())
+
+    return en
+  }
+
+
+  render(batch: Batch) {
+
+
+
+
+  }
+
+}

src/components/main_menu.ts

@@ -0,0 +1,20 @@
+import { World, Component } from '../world'
+import { Vec2, Mat3x2 } from 'blah'
+
+import { Background } from './background'
+
+export class MainMenu extends Component {
+
+
+  static make = (world: World, position: Vec2) => {
+    let en = world.add_entity(position)
+
+    en.add(new MainMenu())
+
+    Background.make(world, position)
+
+    return en
+
+  }
+
+}

src/content.ts

@@ -2,7 +2,7 @@ import Game from './game'
 import { Rect, Vec2, Image as BImage } from 'blah'
 import { Texture, Subtexture } from 'blah'
 
-import { Sprite } from './assets/sprite'
+import { Frame, Animation, Sprite } from './assets/sprite'
 
 import content_page0 from '../content/out_0.png'
 import content_page0_json from '../content/out_0.json'
@@ -26,6 +26,42 @@ class Content {
     let texture = Texture.from_image(image)
 
     this.sprites = []
+
+
+    content_page0_json.sprites.forEach(_sprite => {
+      let { name, packs, tags } = _sprite
+
+
+      let origin = Vec2.zero
+
+      let animations: Array<Animation> = []
+
+      tags.forEach(tag => {
+        let duration = 100 / 1000
+        let frames = []
+        for (let i = tag.from; i <= tag.to; i++) {
+
+          let _ = packs[i]
+          let framerect = Rect.make(_.frame.x, _.frame.y, _.frame.w, _.frame.h)
+          let subrect = Rect.make(_.packed.x, _.packed.y, _.packed.w, _.packed.h)
+
+          let frame = new Frame(Subtexture.make(texture, subrect, framerect), duration)
+          frames.push(frame)
+        }
+
+          let anim = new Animation(tag.name, frames)
+
+          animations.push(anim)
+      })
+
+
+
+      let sprite = new Sprite(name, origin, animations)
+
+      this.sprites.push(sprite)
+
+
+    })
   }
 
 

src/game.ts

@@ -11,6 +11,8 @@ import { Entity, Component } from './world'
 
 import Content from './content'
 
+import { MainMenu } from './components/main_menu'
+
 export default class Game {
 
 
@@ -23,18 +25,32 @@ export default class Game {
 
   buffer!: Target
 
+  world!: World
+
   init() {
 
+    this.world = new World()
+
     this.buffer = Target.create(Game.width, Game.height)
 
     batch.default_sampler = TextureSampler.make(TextureFilter.Nearest)
 
 
     Content.load().then(() => {
+      this.load_room()
     })
   }
 
+
+  load_room() {
+
+    let offset = Vec2.make(0, 0)
+
+    MainMenu.make(this.world, offset)
+  }
+
   update() {
+    this.world.update()
   }
 
   render() {
@@ -43,7 +59,7 @@ export default class Game {
 
       this.buffer.clear(Color.hex(0x150e22))
 
-      //this.world.render(batch)
+      this.world.render(batch)
 
 
       batch.render(this.buffer)

src/globals.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

src/world.ts

@@ -14,6 +14,7 @@ export abstract class Component {
   }
 
   render(batch: Batch) {}
+  update() {}
 }
 
 
@@ -85,6 +86,16 @@ export class World {
     return component
   }
 
+  update() {
+
+    for (let components of this.components.values()) {
+      components.forEach(component => {
+        if (component.active && component.entity.active) {
+          component.update
+        }
+      })
+    }
+  }
 
 
   render(batch: Batch) {

tsconfig.json

@@ -10,8 +10,6 @@
     "isolatedModules": true,
     "esModuleInterop": true,
     "noEmit": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
     "noImplicitReturns": true,
     "skipLibCheck": true
   },