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
 }

そして、各動きで、キャラクターImgを正しいものに割り当てます。

お気に入り

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

fiddleを確認してください。左/右が機能しています。上下に png を修正する必要があります。そのためには、各フレームを回転させるのに数分かかります。（フィドルのURLから右の動きの.pngをコピーできます）

オプション 1: (簡単な方法)
as in the fiddle を使用します。Monster_ARun_R.png画像はほぼ正しいことに注意してください。その中に 10 個の画像があり、位置が変わるはずです。左に見えるものは、右に見て右にあるはずです。2番目のものは、次の最後のものにする必要があります（これも右を見るなど） 例（数字は画像です）：

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ファイル（ミラービューのように）を水平に反転しただけですが、うまくいくには、各画像の順序も反転する必要があります。そして、上下の動きも同じです。ANDすべての png ファイルは水平です。フィドルに入れたものは垂直で、次のような画像が必要です。 ここに画像の説明を入力

于 2013-08-01T14:42:47.543 に答える