use spritesheet & metadata from bundle/ instead of hard-coding a few

This commit is contained in:
Colin McMillen 2019-10-03 16:42:21 -04:00
parent c82e19470c
commit cfe3065077
2 changed files with 16 additions and 18 deletions

View File

@ -35,9 +35,9 @@
<button id="6x">6x</button> <button id="6x">6x</button>
<button id="7x">7x</button> <button id="7x">7x</button>
<button id="8x">8x</button> <button id="8x">8x</button>
<img src="res/tf/atlantis/tf_atlantis_tiles.png" id="atlantis" style="display: none"> <img src="bundle/tf_atlantis_tiles.png" id="atlantis" style="display: none">
<img src="res/tf/halloween/ghost1.png" id="ghost" style="display: none"> <img src="bundle/spritesheet.png" id="spritesheet" style="display: none">
<img src="res/tf/beasttribes/beast_tribe_2.png" id="cats" style="display: none"> <script src="bundle/spritesheet.js"></script>
<script src="main.js"></script> <script src="main.js"></script>
</body> </body>
</html> </html>

28
main.js
View File

@ -338,8 +338,7 @@ class CharacterSprite {
class Resources { class Resources {
constructor() { constructor() {
const atlantis = document.getElementById('atlantis'); const atlantis = document.getElementById('atlantis');
const ghost = document.getElementById('ghost'); const spritesheet = document.getElementById('spritesheet');
const cats = document.getElementById('cats');
const ts = 16; const ts = 16;
this.sprites = { this.sprites = {
'ground0': new Sprite(atlantis, 2 * ts, 1 * ts, 16, 16), 'ground0': new Sprite(atlantis, 2 * ts, 1 * ts, 16, 16),
@ -357,16 +356,14 @@ class Resources {
'seaweed1': new Sprite(atlantis, 16 * ts, 2 * ts, 16, 32), 'seaweed1': new Sprite(atlantis, 16 * ts, 2 * ts, 16, 32),
'coral0': new Sprite(atlantis, 15 * ts, 9 * ts, 32, 16), 'coral0': new Sprite(atlantis, 15 * ts, 9 * ts, 32, 16),
'rockpile0': new Sprite(atlantis, 17 * ts, 10 * ts, 32, 32), 'rockpile0': new Sprite(atlantis, 17 * ts, 10 * ts, 32, 32),
}
'ghost': new CharacterSprite(ghost, 0, 0, 26, 36), for (const key in spritesheet_json) {
'cat0': new CharacterSprite(cats, 0, 0, 26, 36), const sprite_data = spritesheet_json[key];
'cat1': new CharacterSprite(cats, 26 * 3, 0, 26, 36),
'cat2': new CharacterSprite(cats, 26 * 6, 0, 26, 36), this.sprites[sprite_data['name']] = new CharacterSprite(
'cat3': new CharacterSprite(cats, 26 * 9, 0, 26, 36), spritesheet, sprite_data['x'], sprite_data['y'],
'cat4': new CharacterSprite(cats, 0, 36 * 4, 26, 36), sprite_data['width'] / 3, sprite_data['height'] / 4);
'cat5': new CharacterSprite(cats, 26 * 3, 36 * 4, 26, 36),
'cat6': new CharacterSprite(cats, 26 * 6, 36 * 4, 26, 36),
'cat7': new CharacterSprite(cats, 26 * 9, 36 * 4, 26, 36),
} }
} }
} }
@ -377,10 +374,11 @@ class Player {
this.x = (SNES_WIDTH - 26) / 2; this.x = (SNES_WIDTH - 26) / 2;
this.y = (SNES_HEIGHT - 36) / 2; this.y = (SNES_HEIGHT - 36) / 2;
this.orientation = Orientation.DOWN; this.orientation = Orientation.DOWN;
this.spriteNames_ = [ this.spriteNames_ = [];
'ghost', 'cat0', 'cat1', 'cat2', 'cat3', 'cat4', 'cat5', 'cat6', for (const name in spritesheet_json) {
'cat7']; this.spriteNames_.push(name);
this.spriteNamesIdx_ = 3; }
this.spriteNamesIdx_ = 8;
} }
get spriteName() { get spriteName() {