我正在创建一个基于浏览器的足球经理游戏。
我还处于早期阶段,在学习的过程中不断进步。我在过去的项目中有一些编程经验。我使用2D,同时通过缩小尺寸等来模拟z轴,以考虑感知距离。我已经计算出了"z轴"所需的尺寸缩小公式,但现在正在尝试实现它
到目前为止,我拥有的是:
imgPlayerARun
是一张我有-54px高乘540像素宽(又称10帧)的精灵图。这个图像是用javascript(又名image = new Image()
)创建的,然后我使用createjs.SpriteSheet()
函数和createjs.BitmapAnimation(spriteSheet)
来制作它的动画。这很好。
但现在我需要这个动画在远离用户时缩小大小(也就是说,当z增加时,动画的大小就会减少)。我可以使用简单的来减少图像的高度和宽度属性
image.height = *newsize;
然而,由于我已经在开始时将此图像输入到spritesheet中,因此动画不会自行调整大小。
这是我每次调整大小都必须重建精灵表和动画的情况吗?如果是的话,这不会减慢我的浏览器速度吗?(就好像玩家在z轴上运行一样,几乎每隔几个像素就需要调整一次大小)还有其他方法吗?
以下是一些显示我问题的简化代码:
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();
}
到目前为止,它实际上并没有调整大小。动画只是从左到右,然后再返回。
对于这个问题,有人能帮我吗?当它击中右侧时,它的大小会减少0.75(请参阅不完整的resizeImage()函数),而不会降低动画/浏览器性能。(请记住,这将扩大到更多玩家定期缩小规模)
您可以缩放任何显示对象,包括Sprites(BitmapAnimation)、Bitmaps等。我的建议是缩放舞台上的容器,其中包含所有内容。请注意,您当前无法设置宽度/高度,必须确定新的缩放比例,并使用scaleX/scaleY属性。
var originalWidth = 800;
var newWidth = 600;
var ratio = newWidth / originalWidth;
container.scaleX = container.scaleY = ratio;
扩大舞台本身是可能的,但这会引起一些有趣的问题,因此不建议这样做。