HECK YEAH SPRITES AND ANIMATION
Nicky Case
|
|
@ -1,7 +1,7 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Anxiety Adventure!</title>
|
||||
<title>Adventures with Anxiety!</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles/game.css">
|
||||
<meta name="viewport" content="width=device-width">
|
||||
</head>
|
||||
|
|
@ -15,7 +15,7 @@
|
|||
<div id="paused">
|
||||
<div>
|
||||
paused
|
||||
<div>click anywhere to continue the pain</div>
|
||||
<div>click anywhere to keep freaking out</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -34,6 +34,7 @@
|
|||
<script src="scripts/game/BG_Anxiety.js"></script>
|
||||
|
||||
<script src="scripts/intro/Intro_SceneSetup.js"></script>
|
||||
<script src="scripts/intro/Intro_BG.js"></script>
|
||||
|
||||
<script src="scripts/act1/Act1_SceneSetup.js"></script>
|
||||
<script src="scripts/act1/Act1_Hong.js"></script>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,11 @@
|
|||
/*****************************
|
||||
|
||||
Draw the parallax...
|
||||
and also have the Anxiety Battle Background in it?
|
||||
|
||||
*****************************/
|
||||
function BG_Act1(){
|
||||
|
||||
//
|
||||
|
||||
}
|
||||
|
|
@ -1,3 +1,7 @@
|
|||
Loader.addImages([
|
||||
{ id:"act1_beebee", src:"sprites/act1/act1_beebee.png" }
|
||||
]);
|
||||
|
||||
function Act1_Beebee(){
|
||||
|
||||
var self = this;
|
||||
|
|
|
|||
|
|
@ -1,3 +1,7 @@
|
|||
Loader.addImages([
|
||||
{ id:"act1_hong", src:"sprites/act1/act1_hong.png" }
|
||||
]);
|
||||
|
||||
function Act1_Hong(){
|
||||
|
||||
var self = this;
|
||||
|
|
|
|||
|
|
@ -26,6 +26,9 @@ window.bb = function(){
|
|||
// Init
|
||||
Game.init = function(){
|
||||
|
||||
// HP!
|
||||
window.HP = new HitPoints();
|
||||
|
||||
// Animation!
|
||||
Game.wordsDOM.style.top = "80px";
|
||||
var animloop = function(){
|
||||
|
|
@ -604,7 +607,7 @@ Game.updateCanvas = function(){
|
|||
ctx.restore();
|
||||
|
||||
// Draw HP
|
||||
HP.draw();
|
||||
//HP.draw();
|
||||
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
// Singleton - it's always there!
|
||||
window.HP = new HitPoints();
|
||||
Loader.addImages([
|
||||
{ id:"hp", src:"sprites/ui/hp.png" }
|
||||
]);
|
||||
|
||||
// The Class!
|
||||
function HitPoints(){
|
||||
|
|
@ -17,8 +18,7 @@ function HitPoints(){
|
|||
self.dom.appendChild(self.canvas);
|
||||
|
||||
// My sprite
|
||||
self.image = new Image();
|
||||
self.image.src = "sprites/hp.png";
|
||||
self.image = Library.images.hp;
|
||||
|
||||
// My stats
|
||||
self.reset = function(){
|
||||
|
|
|
|||
|
|
@ -0,0 +1,150 @@
|
|||
Loader.addImages([
|
||||
{ id:"intro_bg", src:"sprites/intro/intro_bg.png" },
|
||||
{ id:"intro_anim", src:"sprites/intro/intro_anim.png" }
|
||||
]);
|
||||
|
||||
function BG_Intro(){
|
||||
|
||||
var self = this;
|
||||
|
||||
// Sprite!
|
||||
var spriteConfig = {
|
||||
image: Library.images.intro_bg,
|
||||
grid:{
|
||||
width: 2,
|
||||
height: 3
|
||||
},
|
||||
frame:{
|
||||
width: 1200,
|
||||
height: 900
|
||||
},
|
||||
anchor:{
|
||||
x: 0,
|
||||
y: 0
|
||||
},
|
||||
frameNames:[
|
||||
"sky",
|
||||
"clouds",
|
||||
"buildings",
|
||||
"grass",
|
||||
"stump",
|
||||
"bag"
|
||||
],
|
||||
x: 0,
|
||||
y: 0
|
||||
};
|
||||
self.layers = [];
|
||||
["sky","clouds","buildings","grass","stump"].forEach(function(layerName){
|
||||
var sprite = new Sprite(spriteConfig);
|
||||
sprite.gotoFrameByName(layerName);
|
||||
self.layers.push(sprite);
|
||||
});
|
||||
|
||||
// HONG
|
||||
var hongSpriteConfig = {
|
||||
image: Library.images.intro_anim,
|
||||
grid:{
|
||||
width: 4,
|
||||
height: 7
|
||||
},
|
||||
frame:{
|
||||
width: 1200,
|
||||
height: 900
|
||||
},
|
||||
anchor:{
|
||||
x: 0,
|
||||
y: 0
|
||||
},
|
||||
x: 0,
|
||||
y: 0
|
||||
};
|
||||
var hongSprite = new Sprite(hongSpriteConfig);
|
||||
self.layers.push(hongSprite);
|
||||
|
||||
// DRAW
|
||||
var BG_WIDTH = 360;
|
||||
var BG_HEIGHT = 450;
|
||||
var PARALLAXES = [
|
||||
0, // sky
|
||||
0.1, // clouds
|
||||
0.25, // buildings
|
||||
0.5, // grass
|
||||
1.0, // stump
|
||||
1.0, // HONG
|
||||
];
|
||||
var OFFSETS = [
|
||||
0,
|
||||
0, // clouds
|
||||
0,
|
||||
0,
|
||||
20,
|
||||
20
|
||||
]
|
||||
// TODO: CLOUDS MOVE BY SELF
|
||||
var ticker = 0;
|
||||
self.draw = function(ctx){
|
||||
|
||||
var parallax = 0; //= -(1+Math.sin(ticker))*90;
|
||||
ticker += 1/60;
|
||||
|
||||
// CLOUD OFFSET
|
||||
OFFSETS[1] = -80 + ticker*3
|
||||
|
||||
for(var i=0; i<self.layers.length; i++){
|
||||
var layer = self.layers[i];
|
||||
layer.x = PARALLAXES[i] * parallax - OFFSETS[i];
|
||||
layer.draw(ctx);
|
||||
}
|
||||
|
||||
// Animate Hong
|
||||
var frame = findFrameOnTicker(ticker);
|
||||
hongSprite.gotoFrame(frame);
|
||||
|
||||
};
|
||||
|
||||
////////////////////////////////////////////////////////
|
||||
|
||||
// ANIMATE HONG, THE FRAMES!
|
||||
|
||||
var HONG_FRAMES = [
|
||||
"0-0",
|
||||
"1-59",
|
||||
"2-79",
|
||||
"3-99",
|
||||
"4-119",
|
||||
"5-139",
|
||||
"6-199",
|
||||
"7-234",
|
||||
"8-244",
|
||||
"9-254",
|
||||
"8-264",
|
||||
"9-274",
|
||||
"10-299",
|
||||
"11-336",
|
||||
"12-346",
|
||||
"13-381",
|
||||
"14-400",
|
||||
"15-410",
|
||||
"14-420",
|
||||
"15-430",
|
||||
"14-440",
|
||||
"15-450",
|
||||
"16-470"
|
||||
];
|
||||
HONG_FRAMES = HONG_FRAMES.map(function(frame){
|
||||
var f = frame.split("-");
|
||||
return [parseInt(f[0]), parseInt(f[1])/30];
|
||||
});
|
||||
var findFrameOnTicker = function(ticker){
|
||||
var lastFrame;
|
||||
for(var i=0; i<HONG_FRAMES.length; i++){
|
||||
var f = HONG_FRAMES[i];
|
||||
if(f[1]<=ticker){
|
||||
lastFrame = f[0];
|
||||
}
|
||||
}
|
||||
return lastFrame;
|
||||
};
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -3,11 +3,11 @@ SceneSetup.intro = function(){
|
|||
Game.resetScene();
|
||||
|
||||
// Background
|
||||
var bg = new BG_Anxiety();
|
||||
var bg = new BG_Intro();
|
||||
Game.scene.children.push(bg);
|
||||
|
||||
// Hong
|
||||
var hong = new Act1_Hong();
|
||||
/*var hong = new Act1_Hong();
|
||||
Game.scene.children.push(hong);
|
||||
|
||||
// Beebee
|
||||
|
|
@ -18,6 +18,6 @@ SceneSetup.intro = function(){
|
|||
Game.scene.children.push(beebee);
|
||||
break;
|
||||
}
|
||||
});
|
||||
});*/
|
||||
|
||||
};
|
||||
|
|
@ -1,11 +1,7 @@
|
|||
// Load assets
|
||||
Loader.addScenes([
|
||||
//"scenes/intro.md"
|
||||
"scenes/test.md"
|
||||
]);
|
||||
Loader.addImages([
|
||||
{ id:"act1_beebee", src:"sprites/act1/act1_beebee.png" },
|
||||
{ id:"act1_hong", src:"sprites/act1/act1_hong.png" }
|
||||
"scenes/intro.md"
|
||||
//"scenes/test.md"
|
||||
]);
|
||||
Loader.load().then(function(){
|
||||
Game.init();
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 218 KiB After Width: | Height: | Size: 250 KiB |
|
Before Width: | Height: | Size: 60 KiB |
|
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 221 KiB |
|
After Width: | Height: | Size: 20 KiB |
|
Before Width: | Height: | Size: 6.4 KiB |
|
Before Width: | Height: | Size: 76 KiB |
|
Before Width: | Height: | Size: 7.8 KiB |
|
Before Width: | Height: | Size: 38 KiB |
|
Before Width: | Height: | Size: 15 KiB |
|
Before Width: | Height: | Size: 5.7 KiB |
|
After Width: | Height: | Size: 362 KiB |
|
Before Width: | Height: | Size: 155 KiB After Width: | Height: | Size: 155 KiB |
|
Before Width: | Height: | Size: 6.5 KiB After Width: | Height: | Size: 6.5 KiB |
|
Before Width: | Height: | Size: 8.2 KiB After Width: | Height: | Size: 8.2 KiB |
|
Before Width: | Height: | Size: 6.2 KiB After Width: | Height: | Size: 6.2 KiB |
|
Before Width: | Height: | Size: 9.3 KiB After Width: | Height: | Size: 9.3 KiB |