JavaScript でゲームを作る Part1

初めまして。エンジニア一年目の池田です。

自分の記事ではフロントエンド言語でゲームを作ろうと思います。

ゲームといっても簡単な2Dゲームを作ります。

今回は
・環境構築
・画面の生成
・画像の描画
この三つをしていきます。

まずは、環境構築からです。最低限の環境としては
・メモ帳
・microsoft Edge
・ペイント
この三つがあれば作ることが可能です。

あくまで最低限なので、「メモ帳なんてつかえるか」、「EdgeよりChrome派」等あると思います。「メモ帳」はテキストエディタなら何でも大丈夫です。
例
・サクラエディタ
・秀丸
「microsoft Edge」は.htmlが開ければ何でも大丈夫です。
例
・google Chrome
・fire fox
「ペイント」は画像の保存編集ができれば何でも大丈夫です。
例
・Adobe Photoshop
自分の好きな環境で作業しましょう。

ファイルはわかりやすく、
index.html
style.css
main.js
の三つを作りましょう

次に画面の生成です。自分の記事ではHTMLの機能のcanvasを使い、ゲームの画面を作ります。

index.html

<html lang="ja">
    <head>
       <title>ゲームタイトル</title>
       <link rel='stylesheet' href='style.css'>
   </head>

    <body>
        <canvas width="1280px" height="720px"></canvas>
    </body>
</html>

これだけです。 bodyタグの中にcanvasタブを書くだけです。 widthが横幅、heightが縦幅の指定になります。

必要最低限なら完成です。他は装飾を行いたいときに追加しますが今回はしません。

最後に画像の描画をしましょう。

まずは使いたい画像を準備してください。今回私はサイズ512.512のapple.pngファイルを準備しました。　　
画像の描画にはJavaScriptを使います。

まずはHTMLからjsの読み込みを行います。 bodyタグの中に次の一文を追加しましょう。

index.html

<script src='main.js'></script>

scriptタグでjsファイルの読み込みを行います。 srcにはパスを書きます。今回は相対パスで書いています。 HTMLでの準備はこれで完成です。ここからはJavaScriptを編集していきます。

main.js

let canvas = document.getElementsByTagName( 'canvas' )[ 0 ];  
let ctx = canvas.getContext( '2d' );

let image_x = 512;   //画像の幅
let image_y = 512;   //画像の高さ

let image = new Image();
image.src = "apple.png";
image.onload = function()
{
    ctx.drawImage( image, 0, 0, image_x, image_y, 0, 0, image_x, image_y );
}

編集が完了したら、HTMLを実行してみましょう。間違えていなければ次のようになります。画像が左上に表示されたと思います。

1,2行目ではcanvasにアクセスしています。

let canvas = document.getElementsByTagName( 'canvas' )[ 0 ]

この行ではHTML上の一つ目のcanvasタグの情報を取得します。

let ctx = canvas.getContext( '2d' );

この行ではcanvasの描画機能を有効にします。

4~9行目では画像の読み込みと描画を行っています。

let image = new Image();
image.src = "apple.png";

変数imageを画像をHTML上で使えるように読み込みを行います。変数imageを使えばapple.pngはいつでも使えます。

image.onload = function(){
    ctx.drawImage( image, 0, 0, image_x, image_y, 0, 0, image_x, image_y );
}

.onloadでは読み込みが終了次第動かすプログラムを書くことができます。

ctx.drawImage( image, 0, 0, image_x, image_y, 0, 0, image_x, image_y );

この一文で画像をcanvas上に出力を行っております。第一引数では出力する画像の指定
第二引数から第五引数では画像のどの部分を出力するかの指定です。

画像の数値指定の際は一般的に、左上を0,0とし、Xの正は右の方、Yの正は下の方になります。
第二引数は出力する部分の左上の点のX座標
第三引数は出力する部分の左上の点のY座標
第四引数は出力する部分の横のサイズ
第五引数は出力する部分の縦のサイズ

第六引数から第九引数ではcanvas上のどの部分に出力するかの指定です。
第六引数は出力する場所の左上の点のX座標
第七引数は出力する場所の左上の点のY座標
第八引数は出力する場所から横のサイズ
第九引数は出力する場所から縦のサイズ

今回の指定では画像一枚全部出力していますが第二引数から第五引数の数値を変えると画像の一部分のみ出力できたり、第八引数と第九引数の数値を変えると拡大、縮小ができます。

今回はここまでです。約18行で画像の描画ができました。次回から、画像を動かしたり、二枚以上の画像の描画等をしていき、2Dゲームに近づけていきます。

お疲れ様でした。

バレットグループについてはこちら

bltinc.co.jp

Colorful Bullet

JavaScript でゲームを作る Part1

CATEGORY