おもちゃバコ

中身スカスカ♡

JavaScriptでゲームを開発する環境を考えてみた

こんにちは

HTML5/CSSJavascriptでゲーム開発する方法を個人的にまとめてみました。

ちなみにWeb系の知識はほとんどないです。


動機

UnityやUE5よりお手軽にゲームを開発出来る環境を模索したかった。
ゲームエンジンは便利だけど,インストールに時間がかかることやPCスペックが要求されるからね...

DirectXやVulkanはライブラリの用意で力尽きそうだし...


あくまで自分用なので,そこんとこよろしく。

開発環境

Web系の開発でよく使用されるツールが分からない。
とりあえずVSCodeを使用しとけば問題なさそう。

ブラウザは常用しているVivaldiでいく。

VSCodeプラグイン

Live Serverはお手軽にローカルサーバを立てられるやつ。
Edgeのプラグインと組み合わせるといい感じになる。

VSCodeVimとVSCode Neovimはどちらか選択。
(vimを使わない人には関係ない)

とりあえずHTML5/CSSJavascriptのsyntaxなどはデフォルトで行く。
必要性を感じた時に何か入れたいと思います。

ライブラリ

最近のブラウザはローカルファイルに対するアクセス制限が強力っぽい。
Live Serverなどを使用してローカルサーバ上で開発していくのが良さそう。

チュートリアル

日本語は無さそうだね。


キャラ絵

SEやBGMは無理だけど,キャラチップとかの絵は頑張りたい。
MSPaintは最終手段にしたい。

昔々に購入した本を参考に頑張ってみる。

基本は8x8で,主要キャラクタは16x16の省エネ体制で頑張りたいと思います。

サウンド

SEとかBGMを一括りにすると怒られそうな気がする...

超有名な最強の音楽配信サイト。
利用規約をよく読んでから利用しようね。

作曲に入門したい人におススメの本を紹介します。


昔々の研修でDesktop Music (DTM)に入門したのですが,素人の自分でもそれっぽいBGMが作れました。
何より挫折しにくいのが良かった。

Unity Asset Store

Unityには頭が上がらない。

Unityは利用しないけど,Unity Asset Storeは積極的に利用したい。
Unity以外でも使用可能っぽい (2023年7月31日現在)

公開先の候補

Github Pagesとitch.ioは無料(利用方法による)でいけるっぽい (2023年7月31日現在)
Steamは無料公開でも掲載料がかかるみたい (2023年7月31日現在)

作品を公開したい場合は,事前に公開先のテストを済ませておくとよいかも。
開発後に掲載できない事が判明したら悲しいからね。

アップロードできる形式も確認しよう。
itch.ioならUnity5.3以下っぽい(?)とかとか。
プロジェクトの種類を選べばよさそう。
そもそもUnity5.3ってなんだよ。


テスト

CDNってすごい便利だね。

PixiJS/Phaser サンプル

画像とmp3は自力で用意した。

Githubリポジトリ
github.com

VSCodeのLive Serverプラグインすごいね。
感動しちゃった。

Github Pages

こんな感じ。
音が鳴らない理由はわからない。

HELLO, PixiJS
HELLO, Phaser

所感

  • PixiJS: ライブラリを作りながらゲーム開発したい。
  • Phaser: ゲーム開発に注力したい。

PixiJSはSDL,PhaserはUnityって感じがしました。


感想

Web系に初めて触れてみたけど,開発環境の構築が楽でいいね。
開発環境構築で力尽きる自分には革新的な技術に感じます。

HTML5/CSSJavascriptは全く分かりませんが,何か作ってみたいと思います。
クソゲーでいいから何か作品を公開するのが今年の目標。