phina.jsで弾幕シューティングを作る / Creating a bullet-hell shooter with phina.js

Transcript

1. QIJOBKTͰ ஄ນγϡʔςΟϯάΛ ࡞Δʂ ゆゆ君(@Hyuyu_kun) in あくあたん工房 2023/11/23
2. 2 phina.js: JavaScript で作られたゲームライブラリ https://phinajs.com
3. サンプル 3 https://phinajs.com
4. 4 Runstant: ブラウザ上で動作するエディタ&プレビュー https://runstant.com
5. phina.jsでサクッと作って動かしてシェア！ 5
6. 6 弾幕シューティング 怒首領蜂 東方Project https://store-jp.nintendo.com/list/software/70010000046176.html https://www.youtube.com/watch?v=VL5VZuUcX74
7. 7 弾幕シューティング 怒首領蜂 東方Project 自機 https://store-jp.nintendo.com/list/software/70010000046176.html https://www.youtube.com/watch?v=VL5VZuUcX74
8. 8 弾幕シューティング 怒首領蜂 東方Project 敵 https://store-jp.nintendo.com/list/software/70010000046176.html https://www.youtube.com/watch?v=VL5VZuUcX74
9. 9 弾幕シューティング 怒首領蜂 東方Project 弾幕 https://store-jp.nintendo.com/list/software/70010000046176.html https://www.youtube.com/watch?v=VL5VZuUcX74
10. 弾幕を避けながら敵を倒していくゲーム 10 中には美しい弾幕もあって綺麗
11. phina.jsで弾幕シューティングを作ってみる 11
12. 12 参考書 https://www.amazon.co.jp/dp/4797352299
13. phina.jsで弾幕を作ってみる n 今回作ってみた弾幕 • 方向弾 • 渦巻弾 • 多方向渦巻弾 • 両回転渦巻弾 • 旋回加速渦巻弾 • 両回転渦巻弾 + 旋回加速渦巻弾 • 洗濯機渦巻弾 13
14. 14 弾の実装 // 初期位置 // 発射角度(0.0~1.0) // 弾の進行方向の変化量 // 弾の初速 // 弾の加速度 // 移動方向 // 弾の進行方向を変化 // 弾の速さを変化
15. 方向弾 15 // 下方向 速さ20
16. 16 渦巻弾(方向弾を回転させればOK) // 発射方向を変化させる
17. 17 多方向渦巻弾 // 発射数を指定できるように
18. 18 多方向渦巻弾 // 発射数分の弾を生成 // それぞれ方向を変えて this.shotCount == 4の時、 i / this.shotCountは0.0, 0.25, 0.5, 0.75と変化する 右, 下, 左, 上
19. 19 多方向渦巻弾 弾の密度を変えられるようにしたい
20. 20 多方向渦巻弾 // 増やした
21. 21 多方向渦巻弾 // this.timeはthis.interval回に1回0になる == 間引く
22. 22 両回転渦巻弾 回転方向を2つ取るようにする - 時計回り - 反時計回り
23. 23 両回転渦巻弾 // 両回転 // それぞれ発射回数分 // それぞれの回転方向
24. 24 両回転渦巻弾 ちなみに、両回転の変化量を揃えてしまうと 簡単な弾幕になってしまう
25. 25 旋回加速渦巻弾 ←旋回 加速→
26. 26 旋回加速渦巻弾
27. 27 両回転渦巻弾 + 旋回加速渦巻弾 2種類の弾幕を発射してくる敵(CombinedSpiralShooter)として実装
28. 28 洗濯機渦巻弾 右巻き 右巻き→左巻き 左巻き 左巻き→右巻き
29. 29 洗濯機渦巻弾 -maxShotAngleRate ~ maxShotAngleRate // 発射角度 -maxBulletAngleRate ~ maxBulletAngleRate // 旋回角度 の範囲で変化させて右巻きになったり、左巻きになったりする
30. 30 洗濯機渦巻弾 // 右巻き→左巻き // の値の変化は // 250: 1 // 275: 0 // 300: -1
31. 31 Runstantで公開しているので遊んでみてね https://runstant.com/Hiroya-W/projects/caa17791
32. おしまい 32