👾

JavaScriptでゲーム制作②　～ゲーム画面を作る～

2022/02/18に公開

JavaScript

Game

PixiJS

tech

JavaScriptでゲーム制作①　～準備～で準備ができたら、いよいよゲーム作りに入ります。

■準備したファイルとブラウザの関係

前記事で２つのファイルが出来上がり、Chromeブラウザがインストールされました。
ファイルとブラウザの関係は次の通りです。

今回はindex.htmlにゲームのルールや動きを記述していきます。

■ゲーム画面を作る

index.htmlを編集します。
index.htmlを右クリック→プログラムから開く(H)→メモ帳をクリックします。
"<body>test</body>"から"test"を削除します。
"<body></body>"の後に"<script></script>"を追記します。

<html>
    <head>
        <title>Game</title>
        <meta charset="utf-8"/>
        <script src="pixi.min.js"></script>
    </head>
    <body></body>
    <script>
    </script>
</html>

"<script></script>"に以下のプログラムをコピー＆ペーストします。

    <script>
    // PIXIアプリを作成
    const app = new PIXI.Application({
    width: 480,//画面幅480px
    height: 640,//画面高640px
    backgroundColor: 0x1099bb,//背景の色。水色
    });
    document.body.appendChild(app.view);//<body>に追加します。
    </script>

"const app"はappという変数を宣言しています。変数とは箱のような入れ物と考えてください。

そしてappにゲームアプリを入れます。
ゲームアプリはPIXI.Application({});です。"="でappに入れます。
PIXI.Application({})の前に"new"をつけることでゲームアプリが新規作成されます。

PIXI.Application({})の{}の中にゲーム画面の設定を記述します。
ゲーム画面の幅はwidth、高さはheightにピクセル数を設定します。
画面背景の色は"0x" + 色コードで設定します。
色コードは原色大辞典のカラーピッカーで調べることができます。下記ページのHEXの６桁です。
https://www.colordic.org/picker

最後は"<body></body>"に変数appのviewを追加します。document.body.appendChild()で追加することができます。
appはゲームアプリですが、下記のように設定を"."で個別に参照することができます。
（例）app.view →ゲームの背景
　　　app.width →幅（480px）
　　　app.stage →キャラなどを配置する舞台
Pixi.jsのドキュメントも合わせて参考にしてください。

また、”//”を入力した後の文字はコメントになります。プログラムとして実行されません。

■ブラウザで確認する

index.htmlを前記事でインストールしたChromeブラウザで表示します。
index.htmlを右クリック→プログラムから開く(H)→GoogleChromeをクリックします。
水色のゲーム画面が表示されます。

これでゲーム画面が完成しました。次はプレイヤーキャラを画面に登場させます。

■準備したファイルとブラウザの関係

■ゲーム画面を作る

■ブラウザで確認する

Discussion