Question

这是我的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;
                }
            }

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

Answer 1

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

（我为你做了，你可以在网址下看到）

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

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

检查 fiddle ，左/右工作，向上，向下，你必须修复png，因为旋转每一帧需要几分钟。（你可以从小提琴中的网址复制.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 :(多一点工作）
如果你有Right，Left，Up＆amp;向下移动你需要为每个动作提供不同的png /文件。每个png文件由几个图像组成，以制作动画。我修复的那个我只是水平翻转原始的png文件（如镜像视图），但要做得好，你还需要反转每个图像的顺序。然后同样的up＆amp;向下运动。 AND 所有png文件都是水平的。你放在小提琴里的那些是垂直的你需要这样的图像： enter image description here

在动画人体条纹时画布内部的奇怪行为

1 个答案: