0

这是我的 jsfiddle：http: //jsfiddle.net/yKvuK/6/

if (keydown.right) {
                characterImg.src = 'http://pixenate.com/pixenate//cache/photo_e2094a30725ccd74a6d889648d34343b.jpg';
                character.CurentPos++;

                character.x += character.speed;

                if (character.x > CanvasWidth - character.width) { // make the character keep walking even if he step outside the canvas
                    character.x = 0;
                }

            }

            if (keydown.up) {
                characterImg.src = "http://pixenate.com/pixenate//cache/photo_1_5ef90294cd2afeb4486dedd663cfd872.jpg";
                character.y -= character.speed;

                if (character.y < 0) {
                    character.y = 0;
                }
                 character.CurentPos++;


            }

            if (keydown.down) { //going down
                characterImg.src = "http://pixenate.com/pixenate//cache/photo_1_ff6712ddd80b138f1865eb4937622d1b.jpg";
                character.CurentPos++;

                character.y += character.speed;
                if (character.y > CanvasHeight - character.height) {
                    character.y = CanvasHeight - character.height;
                }
            }

你可以在尝试上下移动角色时看到问题有人可以帮助我吗？

4

1 回答 1

1

您需要创建一个新版本的图像，我的意思是为每个图像制作一个新的 png 文件。jpg 不支持透明度。

（我为你做的，你可以在下面的url中看到）

当你有文件时，你可以这样做：

var characterImgL = new Image(); // Image Left to be loaded and drawn on canvas
var characterImgR = new Image(); // Image Right to be loaded and drawn on canvas
var characterImgU = new Image(); // Image Up to be loaded and drawn on canvas
var characterImgD = new Image(); // Image Down to be loaded and drawn on canvas

...

function init() {
     characterImgL.src = "http://david.blob.core.windows.net/easeljstutorials/img/MonsterARun.png";
     characterImgR.src = "http://s23.postimg.org/8j8gi9owb/Monster_ARun_R.png";
     characterImgU.src = "http://s23.postimg.org/8j8gi9owb/Monster_ARun_R.png";
     characterImgD.src = "http://s23.postimg.org/8j8gi9owb/Monster_ARun_R.png";
     characterImg = characterImgL;  //Start image = Left image
 }

然后在每个动作中将 characterImg 分配给正确的动作。

喜欢

characterImg = characterImgR; if movement to right
characterImg = characterImgL; if movement to left

检查小提琴，左/右工作，上，下你必须修复png，因为旋转每一帧需要几分钟。（您可以从小提琴中的 url 复制 .​​png 以进行正确的移动）

选项1：（简单的方法）
在小提琴中使用。请注意，Monster_ARun_R.png图像几乎是正确的，里面有 10 个图像，它们应该改变位置。你在左边看到的那个应该在右边看右边。第二个应该是下一个（也向右看，等等）示例（数字是图像）：

1 2 3 4 5 6 7 8 9 10应该是10 9 8 7 6 5 4 3 2 1 向右看（否则与MonsterARun.png

选项 2：（多做一点工作）
如果您要进行右、左、上和下移动，则每次移动都需要不同的 png/文件。每个 png 文件由多个图像组成以制作动画。我修复的那个我只是水平翻转原始 png 文件（如镜像视图），但要做得好，您还需要反转每个图像的顺序。然后上下运动也是如此。并且所有 png 文件都是水平的。您放入小提琴的那些是垂直的，您需要这样的图像： 在此处输入图像描述

于 2013-08-01T14:42:47.543 回答