Zenn
👾

JavaScriptでゲーム制作③　～プレイヤーキャラを作る～

2022/02/18に公開
JavaScript
Game
PixiJS
tech

JavaScriptでゲーム制作②　～ゲーム画面を作る～でゲーム画面ができました。
次はプレイヤーキャラを作ります。

■プレイヤーキャラ

①でお伝えした通り、今回はカゴを動かしてリンゴを取るゲームです。
プレイヤーキャラはカゴです。

上の画像を右クリックして[名前を付けて画像を保存...]を選択、basket.pngという名前でデスクトップに保存します。
"<script></script>"に下記のプログラムを追加します。

    //かご
    const basket = PIXI.Sprite.from('basket.png');//画像
    basket.width = 64;//幅
    basket.height = 34;//高さ
    basket.x = 96;//x座標
    basket.y = app.view.height - basket.height;//y座標
    basket.anchor.set(0.5);//中心点。０が左端、０．５が中央、１が右端
    app.stage.addChild(basket);

basketという入れ物（変数）にカゴの画像basket.pngを入れます。PIXI.Sprite.from()で画像を入れることができます。
幅と高さに画像の幅、高さを設定します。
x座標は96と固定にします。y座標はゲーム背景の高さからカゴの高さを引いた位置にします。
basket.anchorとは画像の中心点のことで０が左端、０．５が中央、１が右端を表します。
今回は０．５（中央）にします。
最後にapp.stageに追加します。stageとはプレイヤーキャラなどを配置する舞台のことです。

■プレイヤーキャラの表示を確認する

それではブラウザでプレイヤーキャラを確認してみましょう。
index.htmlをChromeブラウザにドラッグアンドドロップします。

そうすると背景だけでプレイヤーキャラが表示されないと思います。

最近のブラウザは自分のPCの画像を表示することを禁止しています。セキュリティに危険があるためなのですが、これではゲームを確認できないので下記のやり方で表示させます。

1.デスクトップを右クリック⇒[新規作成(X)]⇒[ショートカット(S)]を作成する

2.リンク先に下記を設定。※＜ユーザー名＞には自分のユーザー名を入力してください。
　[次へ]ボタンをクリック。
"C:\Program Files\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files file:///C:\Users\＜ユーザー名＞\Desktop\index.html

3.ショートカット名を入力して[完了]ボタンをクリック

これでショートカットが出来上がります。

ショートカットをダブルクリックすると、プレイヤーキャラが表示されます。

■プレイヤーの動き

次にプレイヤーキャラを操作できるようにしましょう。
プレイヤーは下図にあるように４つの位置を移動するように作ります。

"<script></script>"に下記のプログラムを追加します。

    //カゴの操作
    document.addEventListener('keydown',
        function (key){
            // 左キー
            if (key.keyCode === 65 || key.keyCode === 37) {
                if ( (basket.position.x - ( basket.width / 2 )) > 96) {
                    basket.position.x -= 96;
                }
            }
            // 右キー
            if (key.keyCode === 68 || key.keyCode === 39) {
                if ( (basket.position.x + ( basket.width / 2 )) < 384 ) {
                    basket.position.x += 96;
                }
            }
        }
    );

・document.addEventListenerは何か入力されたり、内容が変化したりなど”イベント”が
　発生した時の動きを設定するものです。'keydown'はキー入力を表します。

・function (key){}でキー入力の制御内容を記述します。keyは入力されたキーの情報です。
　PCおよびテンキーの左キーはそれぞれ65と37という値がkeyCodeに入ってきます。
　その値の時にプレイヤーのｘ軸を左に動かします。
　ただし①がx:96なのでそれ以下の値は操作できないようにします。
　それが"if ( (basket.position.x - ( basket.width / 2 )) > 96)"の部分です。

・PCおよびテンキーの右キーはそれぞれ68と39という値がkeyCodeに入ってきます。
　その値の時にプレイヤーのｘ軸を右に動かします。
　ただし④を超えた右には操作できないようにします。
　それが"if ( (basket.position.x + ( basket.width / 2 )) < 384 )"の部分です。

それでは、ブラウザで確認してみましょう。左右に移動できるようになっていると思います。

これでプレイヤーキャラを作成できました。
次はプレイヤーのカゴがキャッチするリンゴの動作を作成します。
https://zenn.dev/genmakai/articles/7cbe09939bcf8e

Discussion