オンラインゲーム開発:五日間でオリジナルゲームをつくってみる - その1(はじめに)

3 min read読了の目安(約3300字

概要

年末年始のお休みを使って、ブラウザで遊べるオリジナルゲーム 「アクションじゃんけん」をつくりました。五日間で遊べるものになったと思うので、作り方をシェアします。

game-screenshot
ゲーム画面

なぜ?

ゲーム開発が自分が好きなジャンルだから。

普段はサーバーサイドエンジニアなのですが、10年前に遡るとカードゲームをつくっていたという過去があります。ゲームが持つ論理とアートの融合する部分は、人生どの年齢でも好きだった(ゲームをテストする人になりたい、と小6の卒業文集に書いていた)思い出があります。

オンラインゲーム は、開発者にとって「総合格闘技」だと思うから

mdn-game-dev-overview
ゲーム開発でお世話になるウェブ技術のおさらい

上の図をみると分かると思うのですが、とても幅広い分野です。どこにでも深堀りしていけます。ウェブアプリ開発(サーバサイド、データ処理バックエンド)を中心に過去数年間活動してきた身からすると、この「冒険の地図」を手にした感じはとてもワクワクします。

願い

みなさんの中に「ゲーム作りたいなと思ってはいるけど。。」と迷っている方がいたら、この記事を参考にぜひ始めてみてください。何事も良質の練習をこなさないと上達しません。はじめの一歩+次の二、三歩までのイメージがつくことがこの記事のゴールです。

想定読者

ゲーム開発したい人。プログラミングかじったことがある人。でもフロントエンドはそんなに得意じゃない人。

テーマ

オンラインゲームは星の数ほどありますが、それを真似るだけだとモチベーションが続きませんでした。私は何か一捻り効かせたようなものが好きなので、できる範囲でオリジナル要素を取り入れることもテーマとして掲げています。

構成

  1. つくったゲームの紹介
  2. Day1: ローカル開発環境の構築
  3. Day2~3: ゲーム要素の実装
  4. Day4~5: 「遊べるもの」に向けての調整

1. つくったゲームの紹介

2D空間動き回りながら、プレイヤー同士がバトルロイヤル形式でじゃんけんをするゲームをつくりました。こちらから試しに遊べます

私がボット機能を追加するまでは、(たまたま同じ時間に接続する)対戦相手が現れるのを気長にお待ちください。また、初回の読み込みに数秒かかることがあります。

2. Day1: ローカル開発環境の構築

まずは、Macbook上で開発サイクルが回せる状態をつくりました。
(Node.jsがMacにインストールされている前提)

(作業1-1)

  1. Yarnをインストールする[1]
  2. Webpackをインストールする
  3. JS/HTMLの雛形をつくっておく。 mkdir src dist...
  4. WebpackでJSファイルをコンパイル。yarn webpack --watch
  5. ファイルとしてアクセスしてみる。open dist/index.html

ここまで作業したものを、このコミットに置いておきました。照らし合わせに使ってください。

次に、Canvas要素を配置してみます。この作業をするときは、このチュートリアルが大変参考になりました。

(作業1-2)

  1. Canvasに緑色の丸を書いてみる。beginPath...
  2. カーソルキーを押すとJSが反応する状態にしておく。document.addEventListner...
  3. Canvasを更新するゲームループをつくる。 setInterval(...)
  4. 丸の位置をX, Yで表現し、カーソルキーに応じて増減させる。


動かせる丸

(作業1-2)部分のコミット

最後に、サーバーを立ててWebSocketsという技術を使って通信できるか確かめます。

(作業1-3)

  1. Express web serverをローカル環境で動かす。
  2. Socket.ioというWebSocketsを使いやすくするライブラリを使って、サーバーとクライアント(今まで書いていたJS)を通信させてみる。

(作業1-3)部分のコミット

そこそこ長くなってきてしまったので、次の記事に続きます。

今後の記事でカバーする内容

  1. Day2~3: ゲーム要素の実装
  2. Day4~5: 「遊べるもの」に向けての調整

お楽しみに!

アップデート

その2、その3(最終章)を公開しました。

https://zenn.dev/kenzan100/articles/d64adeef878f2a

https://zenn.dev/kenzan100/articles/b5ba41b2b63293
脚注
  1. 別にNode.js同梱のNPMでも最近はいいらしい。 ↩︎