プロのエンジニアが1人日を捻出してレトロJRPGっぽいゲームを本気で作った

2018/08/10 に株式会社ドリコムで行われたエンジニア総選挙の発表資料です。

Transcript

1. 夏休みがまだ取れてい ないプロのエンジニア が 1⼈⽇を捻出してレ トロJRPGっぽいゲー ムを本気で作った
2. Bio Smith ドリコムで開発する(ほぼ)全てのゲームの基盤作ってます
3. ルール • enza で利⽤しているゲームライブラリを使⽤ • モバイルブラウザで動くものを作る • 動作環境は enza 準拠とする • npm install --save 禁⽌ (--save-dev は OK) • 但し、アルゴリズム系は例外とする • 画像やサウンド素材は過去の資産を流⽤してもよい
4. 『マップ』について考える
5. 『マップ』について考える JRPG のマップとは 背景がある モノがある ヒトがいる
6. 『マップ』について考える 背景 • 動かない • 歩ける • 繰り返す(タイル)
7. 『マップ』について考える • 調べられる • 通れない • 通れるかも知れない • 繰り返さない(タイル) • アニメーションする • しないかもしれない モノ
8. 『マップ』について考える • 調べられる • 通れない • 繰り返さない(タイル) • アニメーションする ヒト
9. 『マップ』について考える • 調べられる • 通れない • 通れるかも知れない • 繰り返さない(タイル) • アニメーションする • しないかもしれない • 調べられる • 通れない • 繰り返さない(タイル) • アニメーションする
10. 『マップ』について考える • 調べられる • 通れない • 通れるかも知れない • 繰り返さない(タイル) • アニメーションする • しないかもしれない • 調べられる • 通れない • 繰り返さない(タイル) • アニメーションする ヒト・モノ⼀緒でよさそう
11. 『マップ』について考える ２つの概念に分ける 背景がある モノ・ヒト
12. 『歩⾏』について考える
13. 『歩⾏』について考える 歩きたい けど スマフォなのに ⼗字キーで歩くのダサい ダサっ！
14. 『歩⾏』について考える タップしたら そこに向かって 歩いてほしい
15. 『歩⾏』について考える 歩けるところと 歩けないところがある
16. 『歩⾏』について考える 歩けないところを タップしたら 何もしないでほしい
17. 『歩⾏』について考える 歩けなくても 調べられるところが ある
18. 『歩⾏』について考える そういうところには タップしたら そこに向かって 歩いてほしい
19. 『歩⾏』について考える あと ちゃんとタップしたモノ の⽅向を向いてほしい くるり
20. 『歩⾏』について考える 歩くときは⾜踏みして欲しい
21. 『歩⾏』について考える 歩いている⽅向の画像に切りかわって欲しい
22. 『実現⽅法』について考える
23. 『実現⽅法』について考える 背景 モノ・ヒト 地形
24. 『実現⽅法』について考える 素材とマスターデータを⽤意 { tile: [ 1, 7, 7, 7, 7, 7, 7, 2, 10,32,30,30,30,30,34,10, 10,33,31,31,31,31,35,10, 10,37,37,37,37,37,37,10, 10,37,37,37,37,37,37,10, 10,38,39,40,37,37,37,10, 10,41,42,43,37,37,37,10, 10,44,45,46,37,37,37,10, 3, 7, 8, 37,6, 7, 7, 4, 32,30,34,37,32,30,30,34, 33,31,35,37,33,31,31,35 ] } { objects: [ { id: 9, imageName: 'person_1_1_1.png', position: 43, passible: false, size: { width: 1, height: 1 }, animation: { duration: 16, names: [ 'person_1_1_1.png', 'person_1_1_2.png', 'person_1_1_1.png', 'person_1_1_3.png’ ] } } ] } { terrain: [ 0,0,0,0,0,0,0,0, 0,0,0,0,0,0,0,0, 0,0,0,0,0,0,0,0, 0,1,1,1,1,1,1,0, 0,1,1,1,1,1,1,0, 0,1,1,1,1,1,1,0, 0,1,1,1,1,1,1,0, 0,1,1,1,1,1,1,0, 0,0,0,1,0,0,0,0, 0,0,0,0,0,0,0,0, 0,0,0,0,0,0,0,0 ] }
25. 『実現⽅法』について考える タップ周り
26. 『実現⽅法』について考える なんかいい感じにする ⼀⼈⽇しかなくて資料間に合わないので ⼝頭で説明します
27. demo Browsers: Safari / Chrome
28. やったこと • データ設計と定義 • フィールド情報 • タイル情報 • 基本地形情報 • フィールド上のオブジェクト情報 • 初期配置 • 通⾏可/不可 • 専有するエリア (オブジェクトの⼤きさ) • スプライトのフレーム情報
29. やったこと • 座標系関数群実装 • 主に下記情報の相互変換 • ⼆次元座標(⽣x,y) • ⼆次元タイルアドレス(x,y) • タイルインデックス(n) • ビルド環境構築・設定 • 表⽰⽤ html • 過去資産のコンバータスクリプト作成 • テクスチャアトラス情報のPIXI向けコンバート • A* モジュール (3rd party) の TypeScript 対応
30. やったこと • フィールドクラス(シーン)実装 • リソースダウンロード • BGM 再⽣ • フィールド初期化 • 背景画像描画 • フィールドオブジェクト描画 • ユーザタップ • 最新の経路検索⽤地形情報の⽣成 • 基本地形情報とフィールドオブジェクトの状態をマージ • 主⼈公の移動制御 • A* 経路検索
31. やったこと • フィールドオブジェクト実装 • ランタイムとテクスチャアトラス情報とのアンカー差分吸収 • ⾜踏みアニメーション • ⼀定フレーム毎のテクスチャ⼊れ替え • 歩⾏アニメーション • フィールドクラスから渡された経路に基づいた座標移動 • 座標移動のキューイング • 歩⾏⽅向に適した⽅向を向いているテクスチャへの差し替え • 歩⾏停⽌ • 歩⾏完了コールバック • 状態管理
32. 付録：『歩⾏』仕様 • ⽬的地が現在地 • 歩かない • ⽬的地が地形的に到達できない • 歩かない • ⽬的地にフィールドオブジェクトがある • 現在地に隣接している • ⽬的地の⽅向を向く • 現在地に隣接していない • ⽬的地に隣接するタイルから最短距離を代替の⽬的地として経路検索 • 経路があった • 最短の経路を選択して歩く • 代替の⽬的地に到達した時、本来の⽬的地の⽅向を向く • 経路がない • 歩かない
33. 付録：開発環境 • Mac OS v10.12.6 • Chrome v68 • Node.js v8.11.3 • TypeScript v2.8.1 • webpack v4.5.0 • webpack-dev-server v3.1.5 • Atom / Vim • enza-game.js v1.0.3
34. まとめ
35. まとめ 夏休みがまだ取れていないプロのエンジニアが 1⼈⽇を捻出してレトロJRPGっぽいゲームを 本気で作ったら
36. まとめ 夏休みがまだ取れていないプロのエンジニアが 1⼈⽇を捻出してレトロJRPGっぽいゲームを 本気で作ったら 歩くことの品質をキッチリ⾼めたくて それ以外の機能が実装できませんでした