I'm in the process of creating a browser based football manager game.
I'm in the early stages and am learning as I go along. I have some programming experience from past projects. I am using 2D whilst simulating a z axis by reducing size etc. to account for perceived distance. I have calculated the size reduction formula needed for my "z-axis" but am now trying to implement it.
Here's what I have so far:
imgPlayerARun is a sprite sheet I have - 54px high by 540 pixels wide (aka 10 frames). This image is created in javascript (aka image = new Image()) then I use the createjs.SpriteSheet() function and createjs.BitmapAnimation(spriteSheet) to animate it. This works fine.
But now I need this Animation to reduce in size when moving "away" from the user (aka. when z increases then the animation decreases in size). I can reduce the image height and width properties using simple:
image.height = *newsize;
However, since I have already fed this image into the spritesheet on start, the animation will not resize itself.
Is this a case of me having to rebuild the spritesheet and animation with each resize? If so will this not slow down my browser? (As if the player runs up the z axis then it will need to resize almost every few pixels) Is there another way?
Here's some simplified code showing my problem:
html:
<script src="http://code.createjs.com/easeljs-0.6.0.min.js"></script><style type="text/css"></style>
<canvas id='gameOverlay' width='748' height='440'></canvas>
<script type="text/javascript" src="../libraries/jquery.js"></script>
css:
#gameOverlay {
background:green; }
JavaScript:
var canvas;
var stage;
var screen_width;
var screen_height;
var bmpAnimation;
var imgPlayerARun = new Image();
function resizeImage(image) {
if(image) {
image.height = image.height*0.75;
image.width = image.width*0.75;
} else alert("No such image");
}
function init() {
//find canvas and load images, wait for last image to load
canvas = document.getElementById("gameOverlay");
imgPlayerARun.onload = handleImageLoad;
imgPlayerARun.onerror = handleImageError;
imgPlayerARun.src = "http://s14.postimg.org/6sx25uafl/Run.png";
}
function reset() {
stage.removeAllChildren();
createjs.Ticker.removeAllListeners();
stage.update();
}
function handleImageLoad(e) {
startGame();
}
function startGame() {
// create a new stage and point it at our canvas:
stage = new createjs.Stage(canvas);
// grab canvas width and height for later calculations:
screen_width = canvas.width;
screen_height = canvas.height;
// create spritesheet and assign the associated data.
var spriteSheet = new createjs.SpriteSheet({
// image to use
images: [imgPlayerARun],
// width, height & registration point of each sprite
frames: { width: 54, height: 54, regX: 32, regY: -320 },
// To slow down the animation loop of the sprite, we set the frequency to 4 to slow down by a 4x factor
animations: {
walk: [0, 9, "walk", 4]
}
});
// to save file size, the loaded sprite sheet only includes left facing animations
// we could flip the display objects with scaleX=-1, but this is expensive in most browsers
// instead, we generate a new sprite sheet which includes the flipped animations
createjs.SpriteSheetUtils.addFlippedFrames(spriteSheet, true, false, false);
// create a BitmapSequence instance to display and play back the sprite sheet:
bmpAnimation = new createjs.BitmapAnimation(spriteSheet);
// set the registration point (the point it will be positioned and rotated around)
// to the center of the frame dimensions:
bmpAnimation.regX = bmpAnimation.spriteSheet.frameWidth/2|0;
bmpAnimation.regY = bmpAnimation.spriteSheet.frameHeight / 2 | 0;
// start playing the first sequence:
// walk_h has been generated by addFlippedFrames and
// contained the right facing animations
bmpAnimation.gotoAndPlay("walk_h"); //walking from left to right
// set up a shadow. Note that shadows are ridiculously expensive. You could display hundreds
// of animated rats if you disabled the shadow.
//bmpAnimation.shadow = new createjs.Shadow("#454", 0, 5, 4);
bmpAnimation.name = "Player1";
bmpAnimation.direction = 90;
bmpAnimation.vX = 1;
bmpAnimation.x = 16;
bmpAnimation.y = 32;
// have each Player start at a specific frame
bmpAnimation.currentFrame = 10;
stage.addChild(bmpAnimation);
// we want to do some work before we update the canvas,
// otherwise we could use Ticker.addListener(stage);
createjs.Ticker.addListener(window);
createjs.Ticker.useRAF = true;
createjs.Ticker.setFPS(60);
}
//called if there is an error loading the image (usually due to a 404)
function handleImageError(e) {
console.log("Error Loading Image : " + e.target.src);
}
function tick() {
// Hit testing the screen width, otherwise our sprite would disappear
if (bmpAnimation.x >= screen_width - 16) {
// We've reached the right side of our screen
// We need to walk left now to go back to our initial position
bmpAnimation.direction = -90;
bmpAnimation.gotoAndPlay("walk");
resizeImage(imgPlayerARun);
}
if (bmpAnimation.x < 16) {
// We've reached the left side of our screen
// We need to walk right now
bmpAnimation.direction = 90;
bmpAnimation.gotoAndPlay("walk_h");
}
// Moving the sprite based on the direction & the speed
if (bmpAnimation.direction == 90) {
bmpAnimation.x += bmpAnimation.vX;
}
else {
bmpAnimation.x -= bmpAnimation.vX;
}
// update the stage:
stage.update();
}
So far it's not actually resizing. the animation just walks from left to right and back again.
For this question could someone just help me with when it's hits the right side it reduces in size by 0.75 (see incomplete resizeImage() function) without reducing animaton/browser performance. (keep in mind that this will be expanded to be more players reducing size regularly)