オンラインゲーム開発：五日間でオリジナルゲームをつくってみる - その１（はじめに）
概要
年末年始のお休みを使って、ブラウザで遊べるオリジナルゲーム 「アクションじゃんけん」をつくりました。五日間で遊べるものになったと思うので、作り方をシェアします。
ゲーム画面
なぜ？
ゲーム開発が自分が好きなジャンルだから。
普段はサーバーサイドエンジニアなのですが、10年前に遡るとカードゲームをつくっていたという過去があります。ゲームが持つ論理とアートの融合する部分は、人生どの年齢でも好きだった（ゲームをテストする人になりたい、と小６の卒業文集に書いていた）思い出があります。
オンラインゲーム は、開発者にとって「総合格闘技」だと思うから
ゲーム開発でお世話になるウェブ技術のおさらい
上の図をみると分かると思うのですが、とても幅広い分野です。どこにでも深堀りしていけます。ウェブアプリ開発（サーバサイド、データ処理バックエンド）を中心に過去数年間活動してきた身からすると、この「冒険の地図」を手にした感じはとてもワクワクします。
願い
みなさんの中に「ゲーム作りたいなと思ってはいるけど。。」と迷っている方がいたら、この記事を参考にぜひ始めてみてください。何事も良質の練習をこなさないと上達しません。はじめの一歩＋次の二、三歩までのイメージがつくことがこの記事のゴールです。
想定読者
ゲーム開発したい人。プログラミングかじったことがある人。でもフロントエンドはそんなに得意じゃない人。
テーマ
オンラインゲームは星の数ほどありますが、それを真似るだけだとモチベーションが続きませんでした。私は何か一捻り効かせたようなものが好きなので、できる範囲でオリジナル要素を取り入れることもテーマとして掲げています。
構成
- つくったゲームの紹介
- Day1: ローカル開発環境の構築
- Day2~3: ゲーム要素の実装
- Day4~5: 「遊べるもの」に向けての調整
1. つくったゲームの紹介
2D空間動き回りながら、プレイヤー同士がバトルロイヤル形式でじゃんけんをするゲームをつくりました。こちらから試しに遊べます。
私がボット機能を追加するまでは、（たまたま同じ時間に接続する）対戦相手が現れるのを気長にお待ちください。また、初回の読み込みに数秒かかることがあります。
2. Day1: ローカル開発環境の構築
まずは、Macbook上で開発サイクルが回せる状態をつくりました。
(Node.jsがMacにインストールされている前提)
（作業1-1）
- Yarnをインストールする[1]。
- Webpackをインストールする
- JS/HTMLの雛形をつくっておく。
mkdir src dist... - WebpackでJSファイルをコンパイル。
yarn webpack --watch - ファイルとしてアクセスしてみる。
open dist/index.html
ここまで作業したものを、このコミットに置いておきました。照らし合わせに使ってください。
次に、Canvas要素を配置してみます。この作業をするときは、このチュートリアルが大変参考になりました。
（作業1-2）
- Canvasに緑色の丸を書いてみる。
beginPath... - カーソルキーを押すとJSが反応する状態にしておく。
document.addEventListner... - Canvasを更新するゲームループをつくる。
setInterval(...) - 丸の位置をX, Yで表現し、カーソルキーに応じて増減させる。
動かせる丸
最後に、サーバーを立ててWebSocketsという技術を使って通信できるか確かめます。
（作業1-3）
- Express web serverをローカル環境で動かす。
- Socket.ioというWebSocketsを使いやすくするライブラリを使って、サーバーとクライアント（今まで書いていたJS）を通信させてみる。
そこそこ長くなってきてしまったので、次の記事に続きます。
今後の記事でカバーする内容
- Day2~3: ゲーム要素の実装
- Day4~5: 「遊べるもの」に向けての調整
お楽しみに！
アップデート
その２、その３（最終章）を公開しました。
-
別にNode.js同梱のNPMでも最近はいいらしい。 ↩︎
Discussion