HECK YEAH SPRITES AND ANIMATION
|
@ -1,7 +1,7 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<title>Anxiety Adventure!</title>
|
<title>Adventures with Anxiety!</title>
|
||||||
<link rel="stylesheet" type="text/css" href="styles/game.css">
|
<link rel="stylesheet" type="text/css" href="styles/game.css">
|
||||||
<meta name="viewport" content="width=device-width">
|
<meta name="viewport" content="width=device-width">
|
||||||
</head>
|
</head>
|
||||||
|
@ -15,7 +15,7 @@
|
||||||
<div id="paused">
|
<div id="paused">
|
||||||
<div>
|
<div>
|
||||||
paused
|
paused
|
||||||
<div>click anywhere to continue the pain</div>
|
<div>click anywhere to keep freaking out</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -34,6 +34,7 @@
|
||||||
<script src="scripts/game/BG_Anxiety.js"></script>
|
<script src="scripts/game/BG_Anxiety.js"></script>
|
||||||
|
|
||||||
<script src="scripts/intro/Intro_SceneSetup.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_SceneSetup.js"></script>
|
||||||
<script src="scripts/act1/Act1_Hong.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(){
|
function Act1_Beebee(){
|
||||||
|
|
||||||
var self = this;
|
var self = this;
|
||||||
|
|
|
@ -1,3 +1,7 @@
|
||||||
|
Loader.addImages([
|
||||||
|
{ id:"act1_hong", src:"sprites/act1/act1_hong.png" }
|
||||||
|
]);
|
||||||
|
|
||||||
function Act1_Hong(){
|
function Act1_Hong(){
|
||||||
|
|
||||||
var self = this;
|
var self = this;
|
||||||
|
|
|
@ -26,6 +26,9 @@ window.bb = function(){
|
||||||
// Init
|
// Init
|
||||||
Game.init = function(){
|
Game.init = function(){
|
||||||
|
|
||||||
|
// HP!
|
||||||
|
window.HP = new HitPoints();
|
||||||
|
|
||||||
// Animation!
|
// Animation!
|
||||||
Game.wordsDOM.style.top = "80px";
|
Game.wordsDOM.style.top = "80px";
|
||||||
var animloop = function(){
|
var animloop = function(){
|
||||||
|
@ -604,7 +607,7 @@ Game.updateCanvas = function(){
|
||||||
ctx.restore();
|
ctx.restore();
|
||||||
|
|
||||||
// Draw HP
|
// Draw HP
|
||||||
HP.draw();
|
//HP.draw();
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
// Singleton - it's always there!
|
Loader.addImages([
|
||||||
window.HP = new HitPoints();
|
{ id:"hp", src:"sprites/ui/hp.png" }
|
||||||
|
]);
|
||||||
|
|
||||||
// The Class!
|
// The Class!
|
||||||
function HitPoints(){
|
function HitPoints(){
|
||||||
|
@ -17,8 +18,7 @@ function HitPoints(){
|
||||||
self.dom.appendChild(self.canvas);
|
self.dom.appendChild(self.canvas);
|
||||||
|
|
||||||
// My sprite
|
// My sprite
|
||||||
self.image = new Image();
|
self.image = Library.images.hp;
|
||||||
self.image.src = "sprites/hp.png";
|
|
||||||
|
|
||||||
// My stats
|
// My stats
|
||||||
self.reset = function(){
|
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();
|
Game.resetScene();
|
||||||
|
|
||||||
// Background
|
// Background
|
||||||
var bg = new BG_Anxiety();
|
var bg = new BG_Intro();
|
||||||
Game.scene.children.push(bg);
|
Game.scene.children.push(bg);
|
||||||
|
|
||||||
// Hong
|
// Hong
|
||||||
var hong = new Act1_Hong();
|
/*var hong = new Act1_Hong();
|
||||||
Game.scene.children.push(hong);
|
Game.scene.children.push(hong);
|
||||||
|
|
||||||
// Beebee
|
// Beebee
|
||||||
|
@ -18,6 +18,6 @@ SceneSetup.intro = function(){
|
||||||
Game.scene.children.push(beebee);
|
Game.scene.children.push(beebee);
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
});
|
});*/
|
||||||
|
|
||||||
};
|
};
|
|
@ -1,11 +1,7 @@
|
||||||
// Load assets
|
// Load assets
|
||||||
Loader.addScenes([
|
Loader.addScenes([
|
||||||
//"scenes/intro.md"
|
"scenes/intro.md"
|
||||||
"scenes/test.md"
|
//"scenes/test.md"
|
||||||
]);
|
|
||||||
Loader.addImages([
|
|
||||||
{ id:"act1_beebee", src:"sprites/act1/act1_beebee.png" },
|
|
||||||
{ id:"act1_hong", src:"sprites/act1/act1_hong.png" }
|
|
||||||
]);
|
]);
|
||||||
Loader.load().then(function(){
|
Loader.load().then(function(){
|
||||||
Game.init();
|
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 |