池の鯉も大海を知らず

プログラミングとか作品制作とか

Three.jsでポケモンGOっぽいゲームを作ろうとした

f:id:izumi_ikezaki:20190218163132p:plain


最近3DCG関連のプログラミングでなにか制作物あげたいなーと思いThree.jsに手を出してました。まあweb上での3DCG表現の練習も兼ねて今回はポケモンGOっぽいゲームを作ろうと思ったわけです。

関連記事↓

MAYAで作ったCGアセットをglTF形式に出力する - 池の鯉も大海を知らず

 

 

 作った

そしてできたのがikemonGO(いけもんごー)。

izumiikezaki.github.io

ソースコードはこちら

自分のハンドルネームと捕まえるキャラクターが魚というところから来た安直なネーミングですね。

とりあえず「ボールを投げる→当たったときは捕獲アニメーション」の部分が完成したので公開しました。

 

ちょっとだけ技術的(?)な話

手前のボールをD&Dの要領で動かして素早く上へドラッグするとベクトルが計算されてより遠くへ飛ぶようになっております。

D&Dの部分はthree.jsの拡張ライブラリ(DragControls.js)を利用していて、おそらくそれの仕様で現状スマホのタップには対応してません。投げようとしてもその場で落ちます。なので今のところはPCのみ対応です。

 

あと地味にスマホアプリと違ってwebは縦横の幅が可変だから色々とどうすべきか迷いました。(実はその辺の影響で射出ベクトルの計算がまだ完全にはうまくいってない)

 

おわりに

実は初めのうちはランダムでゲットかそうでないかの判定や、ボールでなく木の実をあげるシステムも制作予定だったので今後追加すると思います。勿論スマホの対応もね。