ATHROID2020(アスロイド2020)アプリ製作ブログ② ~【 種目を増やす 】

 

こんにちは、HOUEN Inc.です。

前回(2020年5月4日)の続きで、9回目の投稿です。(*‘∀‘)

前回は、このアプリを作製し始めたきっかけと、1種目目の競技「ハンドスロー」について書きました。

 

アプリに関してはこちらから(/・ω・)/

www.houen-inc.com

 

「ハンドスロー」がなんとなく動いて、結果が表示されるところまで出来たので、

次は種目を増やそう!!という事で、2種目目「Archery(アーチェリー)」の製作にかかりました。

 

イメージは比較的つきやすく、

1:弓の角度を決める

2:弓を引くパワーを決める

3:的の左右位置を決める

のスリーステップでした。

この時「ハンドスロー」同様、ステップが少ないと簡単に記録が出てしまうので、弓を三回射って合計得点で競う形式としました。

(3×3で9回ボタンをタップします)

「アーチェリー」製作当初は、矢を射ってからマトに当たるまでの動作が、1画面で完結していましたが、演出的にかっこよくなかったので、スクロールさせてマトに到達する仕様にしました。

 

この時点で2018年9月18日(画像の保存日より)です。

製作開始から約1ヶ月ですね・・・(;^ω^)

苦労したのは弦の動きです。

アスロイドの手の座標と、弓の上下の座標を線で結ぶだけですが、最初は1本のラインを描画・消去・描画・・・を繰り返させていました。

画像がただのラインだとかっこよくなかったので、光っているビームのような画像に変更。手の座標と弓の上下の座標から、角度と長さを出して、UIImage.transformですね。

最初はなんだか上手くいかなかった記憶があります。

上3枚が製作初期、下3枚は完成後のスクショになります。

f:id:HOUEN-Inc:20200506124538p:plain

 

ここまでは比較的順調!!(もちろん自分的に・・・)

「アーチェリー」も3本の矢の合計得点が出て、なんとなく遊べる感じになったので、次の競技を製作開始です!!

 

3種目目は「High Jump(走り高跳び)」です。色々と苦労した記憶が・・・(´;ω;`)

構成イメージは、テレビ中継などでよく見るパターンを真似たつもりですが、選手が助走してきてジャンプと同時にカメラアングルが変わる、をイメージしています。

 

操作としては、まずチャレンジするバーの高さを決めます。

競技開始後ボタンをタップする回数は、

1:ジャンプのパワーを決める(3回)

2:ジャンプの高さを決める(縦方向)

3:バーを越える位置を決める(横方向)

の計5回になります。

 

少し迷いましたが、1回失敗すると記録がゼロmになってしまうのは、あまりにも難しいと思い、3回チャレンジして一番高く跳べた高さを記録とする仕様にしました。

 

苦労したのは、バーに当たっているか当たっていないのかを判定する方法、通称「当たり判定」です(勝手に通称と思ってますm(_ _)m)

当たり判定の方法は様々存在すると思いますが、このアプリでは以下のように行なっています。

 

バーの位置に四角いマスを並べています。

マスは奥行きを表すため、奥は小さく、手前は大きくなっています。

このマスの中にアスロイドの体のパーツが侵入すると当たりとなり、バーが落ちます。

下の画像をご参照ください。

 

当然ですが、マスは見えないようα=0になっています。

 

上3枚が製作初期、下の2枚は完成後のスクショです。

f:id:HOUEN-Inc:20200506132538p:plain

 

当たり判定の方法は、これが最適かわかりませんが、ゲームとして成立するまでには至っていると思います。

ちなみにアスロイドの種類によっては、体の突起している部分が当たっているように見えてもバーが落ちない事があります。しかしこれは仕様です!( `ー´)ノ

(画像同士の判定ではなく、座標での判定のためセーフゾーンがあるからです)

 

走り高跳び」がなんとなく動いて、記録が出るようになったのが、2018年10月18日(画像の保存日より)です。

ムム・・1種目に約1ヶ月かかるのか・・・( ゚Д゚)

 

目標6種目なので、2019年2月くらいに全種目完成、2019年4月くらいまでには調整を終えて、東京オリンピックの1年前にはリリース出来そう(●´ω`●)。

こんな楽観的な考えで製作を進めていた気がします。

(このブログを書いている時点ではコロナウィルスの影響で2021年に延期されております。製作時はまさかこのような事態になるとは思ってもいませんでしたが。早く終息して欲しいです。)

 

続いて4種目目、「400m Dash(400m走)」です。

この種目は6種目の中で一番苦労したと思います。(T-T)

 

操作としては、

1:タイミングよくスタートをきる(タイミングが良いほど加速しやすくなる)

2:加速のためのポイントでタイミングよくタップする(10回)

です。

 

タイマーを動かしながらアスロイドを走らせて、ゴールしたらタイマーを止める。

比較的簡単に動作は出来ました。

 

ここまで全4種目、順番に遊ぶと4種類くらいあるとそれなりに楽しい(*´▽`*)!

と思いながらチェックを進めます。

ムムム・・・よく見るとどの種目も動きがかっこ良くない、というか走っているように見えない・・・(>_<)

 

改めて見ていると、なんとなくアスリートが競技する様子を思い浮かべながら製作したため、不自然なロボット的な動きに見えてきました

 

そもそもアスリートを模したアンドロイドが競技するんだから、この位の動きで良いかな~・・・なんて逃げようと思ったこともありましたが、やっぱりダメ!!

ネットを駆使して、様々な大会やオリンピック映像、スローモーションでの人の動きの解析映像など、多くを参考にして4競技の動きを全て修正しました。('◇')ゞ

 

人が走る動作、特に「400m走」ではスタート時の動きに苦労しました・・・。

走り始めは上半身を低く構え、だんだんと起き上がってくる、こんなにマジマジと動きを見るのは生れて初めてでした。

 

この種目でのこだわりがもう一点あります。

それは、下の画像の「残像」です。映画やアニメでもよく見ますが、人や物が速く動くと残像が現れる演出があると思います。

400m走では、いかにも速く走っているんだぞ!を表現したく、残像にこだわりました。

 

上3枚が製作初期、下3枚が完成後のスクショになります。

f:id:HOUEN-Inc:20200506143007p:plain

 

開発当初残像は元画像と同じ色にしていましたが、最終的にはCIFilterのCIHueAdjustで2/3ネガティブな色のものにし、αを段階的に変更させる画像になっています。

「400m走」がなんとなく動いて、記録が出せるようになったのが、2018年11月22日。

 

この後、大変な問題に直面!!(*ノωノ)

今までアイフォンXで動作確認をしながら製作を進めてきましたが、アイパッドで動作確認をしたらガクガクでまともに動かない!!!

処理能力の差なのか、何なのか・・・

座標もズレまくり!!!!

 

リリースまでにはまだまだ苦労の連続ですが、ここまで時間がかかるとは・・・

次回は失敗談ばかりになりそうです。

 

最後までご覧いただき、ありがとうございました。

アプリは無料ダウンロード(アップ内課金有り)ですので、是非お試しください!

アスロイド2020

アスロイド2020

  • Kohei Saito
  • ゲーム
  • 無料

apps.apple.com