mcmillen
/
snej
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

create a CharacterSprite class 

add ability to switch between character graphics by pressing R
main
Colin McMillen 5 years ago
parent
6d5e92faec
commit
aed6bdd877
2 changed files with 89 additions and 40 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      index.html
  2. 128
      main.js

1
index.html
View File

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

128
main.js
View File

@ -196,14 +196,13 @@ class Graphics {
this.ctx_.fillText(string, x, y);
}
drawImage(image, dx, dy) {
const src = image[0];
const sx = image[1];
const sy = image[2];
const width = image[3];
const height = image[4];
drawSprite(sprite, dx, dy) {
this.ctx_.drawImage(
src, sx, sy, width, height, dx, dy, width, height);
sprite.image,
sprite.ulx, sprite.uly,
sprite.width, sprite.height,
dx, dy,
sprite.width, sprite.height);
}
}
@ -248,7 +247,11 @@ class World {
update(timestampMs) {
this.fpsCounter_.update(timestampMs);
const wasRPressed = this.input_.r;
this.input_.update();
if (!wasRPressed && this.input_.r) {
this.player_.cycleSprite();
}
if (this.input_.left) {
this.player_.moveLeft();
}
@ -272,40 +275,71 @@ class World {
}
}
class Sprite {
constructor(image, ulx, uly, width, height) {
this.image = image;
this.ulx = ulx;
this.uly = uly;
this.width = width;
this.height = height;
}
}
class CharacterSprite {
constructor(image, ulx, uly, tileWidth, tileHeight) {
// Assumption: a character sprite consists of 4 rows, which include the
// character facing down, left, right, up (in that order). Each row has 3
// columns, which can be used for a walking animation.
this.down = [];
this.left = [];
this.right = [];
this.up = [];
for (let i = 0; i < 3; i++) {
const x = ulx + i * tileWidth;
this.down.push(new Sprite(
image, x, uly, tileWidth, tileHeight));
this.left.push(new Sprite(
image, x, uly + tileHeight, tileWidth, tileHeight));
this.right.push(new Sprite(
image, x, uly + tileHeight * 2, tileWidth, tileHeight));
this.up.push(new Sprite(
image, x, uly + tileHeight * 3, tileWidth, tileHeight));
}
}
}
class Resources {
constructor() {
const atlantis = document.getElementById('atlantis');
const ghost = document.getElementById('ghost');
const cats = document.getElementById('cats');
const ts = 16;
this.sprites = {
'ground0': [atlantis, 2 * ts, 1 * ts, 16, 16],
'ground1': [atlantis, 3 * ts, 1 * ts, 16, 16],
'ground2': [atlantis, 4 * ts, 1 * ts, 16, 16],
'ground3': [atlantis, 5 * ts, 1 * ts, 16, 16],
'ground4': [atlantis, 6 * ts, 1 * ts, 16, 16],
'ground5': [atlantis, 7 * ts, 1 * ts, 16, 16],
'ground6': [atlantis, 8 * ts, 1 * ts, 16, 16],
'rock0': [atlantis, 1 * ts, 2 * ts, 16, 16],
'rock1': [atlantis, 2 * ts, 2 * ts, 16, 16],
'rock2': [atlantis, 3 * ts, 2 * ts, 16, 16],
'anchor0': [atlantis, 21 * ts, 1 * ts, 16, 16],
'seaweed0': [atlantis, 20 * ts, 2 * ts, 16, 32],
'seaweed1': [atlantis, 16 * ts, 2 * ts, 16, 32],
'coral0': [atlantis, 15 * ts, 9 * ts, 32, 16],
'rockpile0': [atlantis, 17 * ts, 10 * ts, 32, 32],
'ghostdown0': [ghost, 0, 0, 24, 36],
'ghostdown1': [ghost, 26, 0, 24, 36],
'ghostdown2': [ghost, 52, 0, 24, 36],
'ghostleft0': [ghost, 0, 36, 24, 36],
'ghostleft1': [ghost, 26, 36, 24, 36],
'ghostleft2': [ghost, 52, 36, 24, 36],
'ghostright0': [ghost, 0, 72, 24, 36],
'ghostright1': [ghost, 26, 72, 24, 36],
'ghostright2': [ghost, 52, 72, 24, 36],
'ghostup0': [ghost, 0, 108, 24, 36],
'ghostup1': [ghost, 26, 108, 24, 36],
'ghostup2': [ghost, 52, 108, 24, 36],
'ground0': new Sprite(atlantis, 2 * ts, 1 * ts, 16, 16),
'ground1': new Sprite(atlantis, 3 * ts, 1 * ts, 16, 16),
'ground2': new Sprite(atlantis, 4 * ts, 1 * ts, 16, 16),
'ground3': new Sprite(atlantis, 5 * ts, 1 * ts, 16, 16),
'ground4': new Sprite(atlantis, 6 * ts, 1 * ts, 16, 16),
'ground5': new Sprite(atlantis, 7 * ts, 1 * ts, 16, 16),
'ground6': new Sprite(atlantis, 8 * ts, 1 * ts, 16, 16),
'rock0': new Sprite(atlantis, 1 * ts, 2 * ts, 16, 16),
'rock1': new Sprite(atlantis, 2 * ts, 2 * ts, 16, 16),
'rock2': new Sprite(atlantis, 3 * ts, 2 * ts, 16, 16),
'anchor0': new Sprite(atlantis, 21 * ts, 1 * ts, 16, 16),
'seaweed0': new Sprite(atlantis, 20 * 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),
'rockpile0': new Sprite(atlantis, 17 * ts, 10 * ts, 32, 32),
'ghost': new CharacterSprite(ghost, 0, 0, 26, 36),
'cat0': new CharacterSprite(cats, 0, 0, 26, 36),
'cat1': new CharacterSprite(cats, 26 * 3, 0, 26, 36),
'cat2': new CharacterSprite(cats, 26 * 6, 0, 26, 36),
'cat3': new CharacterSprite(cats, 26 * 9, 0, 26, 36),
'cat4': new CharacterSprite(cats, 0, 36 * 4, 26, 36),
'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),
}
}
}
@ -316,6 +350,21 @@ class Player {
this.x = (SNES_WIDTH - 26) / 2;
this.y = (SNES_HEIGHT - 36) / 2;
this.orientation = Orientation.DOWN;
this.spriteNames_ = [
'ghost', 'cat0', 'cat1', 'cat2', 'cat3', 'cat4', 'cat5', 'cat6',
'cat7'];
this.spriteNamesIdx_ = 3;
}
get spriteName() {
return this.spriteNames_[this.spriteNamesIdx_];
}
cycleSprite() {
this.spriteNamesIdx_++;
if (this.spriteNamesIdx_ >= this.spriteNames_.length) {
this.spriteNamesIdx_ = 0;
}
}
moveLeft() {
@ -359,8 +408,8 @@ class PlayerRenderer {
draw(gfx, sprites, player) {
let spriteIndex = Math.floor((this.frameNum % 40) / 10);
if (spriteIndex == 3) { spriteIndex = 1; }
const spriteName = 'ghost' + player.orientation + spriteIndex;
gfx.drawImage(sprites[spriteName], player.x, player.y);
const charSprite = sprites[player.spriteName][player.orientation][spriteIndex];
gfx.drawSprite(charSprite, player.x, player.y);
this.frameNum++;
}
}
@ -423,7 +472,7 @@ class TileRenderer {
const dy = tileSize * i;
const sprite = spriteLookup[layer1[i][j]];
if (sprite) {
gfx.drawImage(sprite, dx, dy);
gfx.drawSprite(sprite, dx, dy);
}
}
}
@ -433,12 +482,11 @@ class TileRenderer {
const dy = tileSize * i;
const sprite = spriteLookup[layer2[i][j]];
if (sprite) {
gfx.drawImage(sprite, dx, dy);
gfx.drawSprite(sprite, dx, dy);
}
}
}
}
}
class GamepadRenderer {

Write Preview
Loading…
Cancel
Save