プログラミング

Node.jsゲーム公開はHerokuが良い – 初めてのゲーム開発からデプロイまでの記録

投稿日:2020年4月7日 更新日:

ゲーム開発初心者が簡単なNode.jsオンラインゲームを作成して公開したい場合はHerokuで公開するのが良いです。Node.jsゲームの公開手段は様々ありますが、Herokuは無料プランで十分にテスト公開ができそうです。
以下、私がオンラインゲーム の作成方法が全く分からない状態から、とりあえず自作オンラインゲーム が公開できた所までの記録です。

各サービスのインストール方法や使用方法はWeb上の多数の記事があるのでここでは一切述べておりません。ご了承ください。

開発環境:MacBook Pro macOS 10.15.3
     Windows10

オンラインゲーム作成の経緯

発端はテレビ番組「有吉ぃぃeeeee!」でフォートナイトを知った事でした。私のゲーム歴はスト2で止まっていました。機種で言うとスーパーファミコンまでです。番組内でフォートナイトのゲーム画面を見て驚がくしました。

「3D空間を自由に駆け巡り、オンライン100人で撃ち合い?」

PlayStation4とやらはとんでもない機種だなと思いました。しかし調べてみるとフォートナイトはPC版もあるそうな。しかも無料?すぐにMacBookProにインストールしてみました。20FPSほどしかでず、また密集すると一桁FPSになってまともな戦闘はできませんでしたが(そもそも私には操作が難しすぎましたが)雰囲気は十分に味わえました。お互いの挙動がリアルタイムで反映されるオンラインゲームにとても興奮しました。同時に「オンラインゲーム 作成」という私にとって未知の分野にとても興味が湧いてきました。

調べてみるとフォートナイト的なゲームは似たような物が多数ある事がわかりました。また、完全にフォートナイトを真似した簡易的なゲームもいくつかありました。2D版や3Dでグラフィックの質が低いけど建築など細部まで再現されている物などなど。フォートナイトもどきは既にやっている人がいるようなので、何かオリジナルのオンラインゲームを作成したみたいと思いました。

PaizaCloudで基本を学ぶ

2020年現在、ゲーム作成方法で検索するとUnityが第一候補として上がってきます。私もまずUnityで開発をしてみようといくつかのチュートリアルを試してみました。しかしすぐに挫折。確かにUnityはクロスプラットフォーム的にゲームを作成できて便利です。しかし、やれる事が多い反面、設定箇所が多く、最初のゲーム作成にはなかなか敷居が高く感じました。そもそもオンラインゲームがどのようにして動作するかも理解していない私とっては無謀でした。

さらに調べていくと「Java Script」という言語がありブラウザで簡単にゲームが作れるとのこと。これはいい。Xcodeのような開発ソフトが不要ですぐにブラウザで結果が見えるのは嬉しいです。

とはいえ、オンラインゲーム 作成にはサーバーサイドで動作するNode.jsとやらが必要であり、初心者がそれらを揃えるには労力を要するのでワンパッケージになっているサービスを利用するのが良いそうな。そこで「PaizaCloud」を試して見ました。Node.jsを使用しているチュートリアル記事を見つけられたのが幸運でした。

一通り例題を試してNode.js + socket.io の基礎を学びました。後で自作のゲームを開発中にこの「socket.io」の凄さを知りました。たった数行でオンライン的な処理が実装できました。

そしていざ自作ゲームの開発を始めようとするとPaizaCloud上では色々と不便な事がでてきました。ブラウザ上での動作がとにかく重い。ここでふと思いつきます。

「Node.jsやsocket.ioなどを自分のPCにインストールできればPaizaCloudは不要では?」

調べてみるとターミナルでnpmコマンド打つだけで必要な物をインストールできました。

ローカル環境で開発

エディタ的なソフトとして「Visual Studio Code」をインストール。ゲームライブラリ的なものとして「Enchant.js」を使用。あとはJava Scriptを書いてChromeでデバッグの繰り返し。
ゲームの内容は「Conway’s Game of Life」というシミュレーションをオンライン対戦風にアレンジした物を作成して見ました。
ゲームはこんな感じです。
ライフゲームバトル

FireBaseで公開を試みるも断念

公開までには少し苦労しました。収益化の目処が立っていないので無料で公開できる物を探しました。
まずはFireBaseを試しました。天下のGoogleによるサービスなので間違い無いだろうと考えました。しかし、Firebaseは多種多様な事が実行できるツールです。Node.jsゲームを試験的に公開したいという目的に対しては操作が少々複雑でした。調べながら何とかソースをアップする所まで行けましたが、アップロード中にエラーが発生。何かのバージョンが違うという内容だったようでしたが私には理解できず断念しました。

次に試したのが「Heroku」。コード管理に「Git」を利用しますが、操作は簡単でした。

Herokuはすんなり公開完了

公開方法はWeb上に多数の記事があるのでそちらは参照すれば良いです。

疑問だった起動方法もProcfile作成で指定できました。ルートディレクトリにProcfileという名前のファイルを作成して「node server.js」といったコマンドをファイル内に記述します。

また、無料プランで大丈夫か?という点については、現在のところ「550時間/月」まで稼働できるようなので私のような試験的な公開には十分です。またターミナル操作で利用可能な残り時間も確認できます。現状、誰もライフゲームバトルで遊んでくれていないので1%も使用されていないです。。。

Herokuでデプロイした感想

無料な上にクレジットカード情報なしでデプロイできた事が他のサービスと比較して太っ腹だと感じました。私はHeroku以外にメジャーなサービスである「Microsoft Azure」、「Google App Engine」でNode.jsアプリのデプロイ経験があります。両者ともに無料サービス利用のためにはクレジットカード情報を登録する必要があります。無料サービスを選択しているうちは課金されないと分かっていても「いつのまにか料金がかかっているのでは?」と結構不安です。
簡易的なNode.jsアプリしかデプロイしていない私の感想ですが、Herokuでの不満な点は日本サーバーを利用できないという点のみです。2021年現在、Herokuの無料プランで利用できるのはUSサーバーかEUサーバーのみのようです。シビアなリアルタイム通信が必要でなければUS、EUサーバーで十分です。しかし、フォートナイトライクなゲームをUSサーバーでデプロイしたところしっかりと数100msのラグがのってしまい、マウスによる視線振りには常に遅れが生じて快適なプレイが実現できませんでした。Web広告が表示されても良いので日本サーバープランがあったら良いと感じました。

Herokuでデプロイしているゲーム

ショーモナイノ/Shomonino(ブラウザゲーム) (Herokuデプロイ、USサーバー)

上記URLから無料で遊べます。
ゲーム自体が高FPSを必要としない内容なので意外と十分楽しめたりします。フォートナイトライクなゲームを目指して作成しましたが、建築のみで編集機能はありません。結果的に編集がないことで、USサーバーによるラグが気にならなかったりします。



School Fight(ブラウザゲーム)  (Herokuデプロイ、USサーバー)

上記URLから無料で遊べます。
ショーモナイノ開発後に頑張って編集機能を追加したものです。編集機能がラグのない反応を必要とする事を実感できます。遠距離で撃ち合うだけなら結構楽しめるかもしれません。




以上、オンラインゲーム 開発初心者の私がゲーム作成開始から公開まで行った記録でした。

-プログラミング

執筆者:

関連記事

Railway.appでついにRegion選択が可能になった – 2023年版PaaS選び

PaaS選びの際、Web検索で情報収集をすると多くの記事が見つかりますが、料金情報などを並べただけで実際に利用した情報がないように思われます。本記事では実際に身銭を切っている立場からPaaS選びについ …

Xcode iOSアプリでGUIをコードだけで作成する Storyboard, Sceneなし

アプリメンテナンスをしている際、どうしようもないビルドエラーに遭遇して解決できず、新規プロジェクトで作り直すという事がありました。私のiPhoneアプリ開発歴は結構長く、始めたのは2013年あたりです …

Microsoft AzureでNode.jsゲームをデプロイ – web.configを忘れるな

Node.js+Three.jsでフォートナイトのような建築FPSゲームを自作しております。Paasサービスは手軽で太っ腹なHerokuを利用していますがサーバーがアメリカにあるため通信ラグに悩まされ …

ブラウザゲームをPWA(Progressive web apps)化してiPhone/Android版を公開した話

PCブラウザゲームを公開してしばらくたった時にスマホ版も出したいなと思いました。ブラウザゲームなのでそのままでもスマホのWebで開けば遊ぶことができます。しかしスマホが回転するごとに画面が乱れたり、ア …

新手の架空請求? GOOGLE CLOUDSINGAPORE JPNから¥31のクレジットカード請求がきた

決算のために会計処理をしているとクレジットカード明細に覚えのない請求がありました。「GOOGLE CLOUDSINGAPORE JPN ¥31」えっ?究極のケチな私はよほどのことがない限り有料のサービ …

スポンサーリンク