技術とエンタメと、その他・・・

主に、技術ネタ、エンタメ系のネタを書いていく予定です。また、自分が参加したイベントに関する記事も投稿予定。

#toio の #Doコン 用に作った #toioDo の作品のコードについて

はじめに

この記事は、ロボットトイ「toio」に関するコンテストである「Do!コン」 に関する話です。そのコンテストに作品を出したのですが、出した作品のコードを以下で説明していきます。

作品の関連リンク

●toioドミノボウリング | ProtoPedia
 https://protopedia.net/prototype/2248

●toioドミノボウリング( #toio #Doコン #toioDo ) - YouTube
 https://www.youtube.com/watch?v=CHE4_lzTbZE

出した作品の概要

冒頭に書いたコンテストに出した作品は「toioドミノボウリング」という名前のもので、全体の動作などは以下の動画のとおりです。

www.youtube.com

作品名のとおり「toio を動かして ボウリングのピンに見立てたドミノを倒す」というゲームになります。

f:id:youtoy:20210510020745j:plain

操作用の UI について

この作品を実行・操作するための UI は「緑の旗」と「ステージ上に置かれたスプライト 1つ」です。

f:id:youtoy:20210511002248j:plain

出した作品のコード(全体)

まず、コード全体は以下となります。

f:id:youtoy:20210510235401p:plain

以下では、作ったコードを 6つのまとまりに分けて掲載します。
6つのうち 5つはスプライトに、残り 1つは背景にコードを書いています。

スプライト用

f:id:youtoy:20210510232153p:plain

f:id:youtoy:20210510232206p:plain

f:id:youtoy:20210510232218p:plain

f:id:youtoy:20210510232229p:plain

f:id:youtoy:20210510232240p:plain

背景用

f:id:youtoy:20210510232626p:plain

実装した内容

以下に、実装した処理の概要を記載したコードのまとまり 6つの画像を掲載します。

まとまり1

f:id:youtoy:20210510234703p:plain

ここでポイントになる部分は、以下のとおりです。

  • スタート後、初期位置へ自動で動いていく(邪魔にならないよう、端のほうを動くよう導線を設定)
  • スタート時に、開始が分かりやすいように動きや声で知らせるようにしている
  • 初期位置を決めるゲームモードになっている間が分かりやすいように BGM を鳴らしている

なお、これ以降も含めて BGM・効果音関連の処理は、背景の部分にコードを書いています。

まとまり2

f:id:youtoy:20210511002838p:plain

ここでポイントになる部分は、以下のとおりです。

  • 角度を決めるゲームモードになっている間が分かりやすいように BGM を鳴らしている(先ほどの位置決めの時と異なる BGM を選択)
  • toio がいきなり外に向かって飛び出すような角度にならないよう、toio の位置を基準にして取り得る向きの範囲に制約を加えている(アークタンジェントを使った 2点間の角度計算を利用)
  • 向きとして取り得る角度の最小と最大の間を直接変化させるのではなく、角度を少しずつ変化させるようにし、ある程度は角度を狙ったところに止められるようにした

まとまり3

f:id:youtoy:20210510234736p:plain

ここでポイントになる部分は、以下のとおりです。

  • マットの外に出て動き続ける、ということがないよう、少し余裕をもった所定の範囲内で動きが止まるように制約をつけた
  • タイヤの速さは、基準となる速さと補正値の和をとるようにして、この後に出てくる「toio がいる位置によって移動する向きが変わる仕組み」を取り込みやすくした

まとまり4

f:id:youtoy:20210510234749p:plain

ここでポイントになる部分は、以下のとおりです。

  • 動き出すタイミングが分かりやすいよう、声で知らせるようにした
  • 位置決め・角度決めのゲームモードからドミノを倒すモードに変わったことが分かりやすいよう、BGM を鳴らすようにした(位置決め・角度決めと異なるもの)
  • 「toio がいる位置によって移動する向きが変わる仕組み」について、仕組みを複数のパターンから切り替えられるよう、ブロック定義の入れ替えで仕組みの変更を行えるようにした
  • 移動終了が分かりやすいように、効果音や動きを入れた

まとまり5

f:id:youtoy:20210510234802p:plain

ここでポイントになる部分は、以下のとおりです。

  • 「toio がいる位置によって移動する向きが変わる仕組み」を実装する際に、位置指定が複雑になりすぎないよう、座標を使うのではなくマスの番号を利用する仕組みにした
  • 上記の仕組みで複数のマスをまとめて指定できるように、マスの列の範囲指定を使ったり、 単純な範囲指定より複雑なパターンを使えるよう、行と列の和が偶数であるかどうかを判定する処理を使った(複数の斜め方向の列をまとめて指定するパターンを使った)

なお、この部分はユーザ自身で改造してほしい、改造ポイントと想定しています。

まとまり6

f:id:youtoy:20210510234815p:plain

ここでポイントになる部分は、以下のとおりです。

  • BGM の処理を toio の処理と並列で動かせるよう、メッセージを送る仕組みを使った
  • 複数の BGM や 効果音が重複して鳴らないよう、またうまく切り替わるよう、スクリプトの停止処理を組み合わせて仕組みを作った

まとめ

以上が、今回の作品でスプライト・背景のそれぞれに書いたコードと、その説明です。