JavaScriptでゲーム制作① ～準備～
はじめまして。ゲーム制作サークル幻マ会です。
我々は２０１７年からゲーム制作を始め、主にブラウザゲームを制作してきました。
今回は、簡単なゲームを作る記事をアップしていきます。
■今回作成するゲーム
今回作成するゲームは上から落ちてくるリンゴをカゴで受け取るゲームです。
■ブラウザゲームの仕組み
ウェブブラウザで遊べるゲームはHTMLというマークアップ言語と
JavaScriptというプログラム言語で作られています。
ゲームにおいては、HTMLが画面表示部分を担当しJavaScriptは動きを担当します。
今回の主役はJavaScriptです。
■JavaScriptライブラリPixi.js
JavaScriptでゲームを制作していく際はライブラリという、制作が楽になるプログラム集を利用します。1からJavaScriptをゴリゴリ書いて制作することも可能ですが、骨の折れる作業で時間もかかります。
今回はPixi.jsという２Dグラフィックのためのライブラリを利用してゲームを作ります。
ブラウザに２D画像を描画するためのライブラリです。
これを利用してゲームを作っていきます。
■制作準備
制作環境はWindows10,11を想定しています。
まずPixi.jsをダウンロードします。"https://pixijs.download/v6.2.2/pixi.min.js"を
右クリック→[名前を付けてリンク先を保存]をクリックしてデスクトップに保存します。
今回はGoogle製ブラウザChromeを使用してゲームを作っていきます。
下記リンク先のページからダウンロードしインストールしましょう。
■HTMLファイル作成
HTMLファイルを作成します。
デスクトップ画面で右クリック→新規作成(X)→テキストドキュメントをクリックします。
そうすると"新しいテキスト ドキュメント.txt"というテキストファイルが作成されます。
.txtが表示されていない方は下記ページに従って拡張子の表示をONにしてください。
次に作成されたファイルをダブルクリックしてください。
メモ帳などのテキストエディタが開いたら下記のコードをコピー＆ペーストします。
<html>
<head>
<title>Game</title>
<meta charset="utf-8"/>
<script src="pixi.min.js"></script>
</head>
<body>test</body>
<script>
</script>
</html>
[×]ボタンを押すと保存しますか？と聞かれるので[はい]をクリックしてください。内容が保存されます。
"新しいテキスト ドキュメント.txt"を右クリック→[名前の変更]をクリックします。
ファイル名をindex.htmlに変更してください。
下図のようにデスクトップにファイルが出来上がります。
そしてindex.htmlをダブルクリックします。Edgeブラウザが起動してtestと表示された真っ白な画面が表示されたと思います。これで準備完了です。
次はゲーム画面を作成します。
Discussion