【オンライン講座+作り方解説】OctoStudioインストール方法とChrome恐竜ゲームの作り方!

KIDSPROは、オンライン講座を12/02(土)、12/03(日)に実施します。
MITメディアラボが開発したモバイルコーディングアプリOctoStudioのインストール方法とChrome恐竜ゲームの作り方を解説します。

OctoStudioをインストールして、Chrome恐竜ゲームを作ろう!

MITメディアラボが開発したモバイルコーディングアプリ「OctoStudio」によるコーディングのやり方、Chrome恐竜ゲームの作り方を学びます。

 

日時: 2023/12/02(土)  & 2023/12/03(日)  17:30 ~ 18:30
場所: オンライン講座
対象: KIDSPROスクール生、KIDSPRO eラーニングをご利用の方
必要なもの: OctoStudioをインストールしたスマホ、またはタブレット
費用: 無料

初めてのOctoStudio+Chrome恐竜ゲームの作り方

STEP.1
OctoStudioのインストール

STEP.2
OctoStudioアプリをダウンロード(インストール)

Android端末はGoogle Playから、iPhone、iPadはApp Storeから「OctoStudio」をダンロード(インストール)しよう。

※OctoStudioは、AndroidとiOSの端末(スマホ、タブレット)のみ対応しています。パソコンでは利用できませんのでご注意下さい。

STEP.3
モバイルアプリストアで「octostudio」検索

モバイルアプリストア(Google PlayまたはApp Store)を開き、「ouctostudio」で検索してOctoStudioをインストールする。

※Android端末の方はこちらから、iPhoneまはたiPadの方はこちらからOctoStudioのページに直接アクセスすることも可能です。

STEP.4
OctoStudioのページ

OctoStudioの詳細ページ、このページからOctoStudioアプリをインストールする。

STEP.5
Octostudioアプリを開く

STEP.6
OctoStudioアプリのアイコンをタップ

OctoStudioアプリをタップして、アプリを開く。

STEP.7
最初に表示される画面

OctoStudioを開くと最初に表示される画面。

STEP.8
画面上のトグルスイッチを「探索」にスライドする

画面上にある「私のプロジェクト」と「探索」のトグルスイッチを、「探索」側にスライドしてみよう。

STEP.9
サンプルプロジェクトが表示される

複数のサンプルプロジェクトが表示される。

※最初はサンプルプログラムを開いて、スクリプトの意味を考えてみたり、スクリプトを書き換え(リミックス)してみることをおすすめします。

STEP.10
OctoStudioの動画説明も見れる

OctoStudioの説明動画(チュートリアル)も見てみよう。

STEP.11
OctoStudioでコーディングするやり方

STEP.12
コーディングのやり方1

1. 「新しいプロジェクトをつくる」ボタンをタップする。

STEP.13
コーディングのやり方2

2. 「スプライトを選ぶ」ボタンをタップする。

STEP.14
コーディングのやり方3

3. OctoStudioのスプライトライブラリーから好きなスプライトを選ぶ。

※スプライトは自分で描いたり、スマホやタブレットのフォトライブラリに保存してある写真を切り抜いてスプライトにすることも可能です。

STEP.15
コーディングのやり方4

4. 「背景を選ぶ」ボタンをタップする。

STEP.16
コーディングのやり方5

5. 好きな背景を選ぶ。

STEP.17
コーディングのやり方6

6. コーディングブロック組み合わせてスクリプトを完成させる。

STEP.18
Chrome恐竜ゲームを作ろう

Chrome恐竜ゲームに近いゲームをOctoStudioで作ろう。

STEP.19
恐竜のスクリプトを作ろう

STEP.20
恐竜の初期設定スクリプト

  1. スタートボタンをタップしたら、下に連結したコードブロックが上から順に実行される。
  2. 恐竜は指定したX座標=60、Y座標=75の位置に一瞬で移動する。
    ※スプライトを指定の座標に移動させるには、 の部分をタップして、 が表示されたら画面上のスプライトをドラッグして移動させたい場所に動かすか、X座標とY座標の値を入力する。
    にするとコードブロックの処理を一瞬で実行します。
  3. 一瞬で恐竜の大きさを100%にする。
    にするとコードブロックの処理を一瞬で実行します。
  4. 変数「点数」の値を「0」にリセットする。
  5. 変数「点数」のステージモニターを表示させる。
OctoStudioのステージサイズ、座標原点について

OctoStudioではステージのサイズは、幅360ユニット x 高さ180ユニットです。

※座標の原点(0, 0)は、ステージの左下ですので注意して下さい(Scratchの原点(0, 0)はステージの中心、MakeCode Arcadeの原点(0, 0)はステージの左上です)。

STEP.21
恐竜をタップしたらジャンプするスクリプト

  1. ステージの恐竜をタップしたとき、下に連結したコードブロックが上から順に実行される。
  2. 「シューッ」という音を鳴らすと同時に次のコードブロックを実行する。
    ※引数 を選択した場合、「シューッ」という音が鳴り終わる前、ほとんど音がなると同時に以下のコードブロックが実行されます。一方を選択した場合は、「シューッ」という音が鳴り終わってから以下のコードブロックが実行されます。音が鳴っている間、スクリプトの実行がストップするようにあります。
  3. 100ユニットのジャンプをする。
STEP.22
恐竜のサボテンとの当たり判定

  1. 恐竜がサボテンに触れたとき、下に連結したコードブロックが上から順に実行される。
  2. 変数「得点」を-1ずつ変える。
    ※つまり、恐竜がサボテンにぶつかると、得点が1点減ります。
  3. 「うなる」の音を鳴らすと同時に、次のブロックを実行する。
    ※引数 を選択した場合、「うなる」という音が鳴り終わる前、ほとんど音がなると同時に以下のコードブロックが実行されます。一方を選択した場合は、「うなる」という音が鳴り終わってから以下のコードブロックが実行されます。音が鳴っている間、スクリプトの実行がストップするようにあります。
  4. タブレットを振動させる。
STEP.23
恐竜の鳥との当たり判定

  1. 恐竜が鳥に触れたとき、下に連結したコードブロックが上から順に実行される。
  2. 変数「得点」を-2ずつ変える。
    ※つまり、恐竜が鳥にぶつかると、得点が2点減ります。
  3. 「うなる」の音を鳴らすと同時に、次のブロックを実行する。
    ※引数 を選択した場合、「うなる」という音が鳴り終わる前、ほとんど音がなると同時に以下のコードブロックが実行されます。一方を選択した場合は、「うなる」という音が鳴り終わってから以下のコードブロックが実行されます。音が鳴っている間、スクリプトの実行がストップするようにあります。
  4. タブレットを振動させる。
STEP.25
サボテンのスクリプトを作ろう

STEP.26
サボテンの初期設定スクリプト

  1. スタートボタンをタップしたら、下に連結したコードブロックが上から順に実行される。
  2. サボテンは指定したX座標=300、Y座標=70の位置に一瞬で移動する。
    ※スプライトを指定の座標に移動させるには、 の部分をタップして、 が表示されたら画面上のスプライトをドラッグして移動させたい場所に動かすか、X座標とY座標の値を入力する。
    にするとコードブロックの処理を一瞬で実行します。
  3. 一瞬でサボテンをステージから隠す。
    ※つまり、スタートボタンをタップするとサボテンはステージから姿を消し、ゲームプレイヤーからは見えなくなっていますが、ステージの右下に待機しているような状態です。
  4. 一瞬でサボテンの大きさを75%にする。
STEP.27
サボテンがステージ左端に移動するスクリプト

  1. メッセージ「サボテン」を受け取ったら、下に連結したコードブロックが上から順に実行される。
  2. 一瞬でステージにサボテンが表示される。
  3. サボテンは中くらいのスピードで、ステージの左端(X座標=0、Y座標=70)に移動する。
    ※スプライトを指定の座標に移動させるには、 の部分をタップして、 が表示されたら画面上のスプライトをドラッグして移動させたい場所に動かすか、X座標とY座標の値を入力する。
    にするとコードブロックの処理を中程度のスピードで実行するので、サボテンは中程度のスピードで左端まで移動します。本コードブロックを実行する前は、初期設定スクリプトによりサボテンはX座標=300、Y座標=70にいるので、縦方向(Y座標)の位置は変わらずに左方向(X座標)にだけ移動するようになります。
  4. 一瞬でステージから姿を消す。
    ※処理3によりサボテンがステージの左に移動してから、本処理4が実行されるので、サボテンがステージの左端まで移動したらステージから姿を消すようになります。
  5. サボテンの初期設定で移動させたX座標=300、Y座標=70と同じ位置に瞬間移動させる。
    ※初期設定のスクリプトと同じように、サボテンは姿を隠したままステージの右下に待機しているような状態となります。
STEP.28
鳥のスクリプトを作ろう

STEP.29
鳥の初期設定スクリプト

  1. スタートボタンをタップしたら、下に連結したコードブロックが上から順に実行される。
  2. 一瞬で鳥をステージから隠す。
  3. 一瞬で鳥の大きさを60%にする。
  4. 鳥の向きを左向きにする。
  5. 鳥は指定したX座標=308、Y座標=135の位置に一瞬で移動する。
    ※スプライトを指定の座標に移動させるには、 の部分をタップして、 が表示されたら画面上のスプライトをドラッグして移動させたい場所に動かすか、X座標とY座標の値を入力する。
    にするとコードブロックの処理を一瞬で実行します。
    ※つまり、スタートボタンをタップすると鳥はステージから姿を消し、ゲームプレイヤーからは見えなくなっていますが、ステージの右上に待機しているような状態です。
STEP.30
鳥がステージ左端に移動するスクリプト

  1. メッセージ「とり」を受け取ったら、下に連結したコードブロックが上から順に実行される。
  2. 一瞬でステージにとりが表示される。
  3. とりは最も早いスピードで、ステージの左端(X座標=0、Y座標=135)に移動する。
    ※スプライトを指定の座標に移動させるには、 の部分をタップして、 が表示されたら画面上のスプライトをドラッグして移動させたい場所に動かすか、X座標とY座標の値を入力する。
    にするとコードブロックの処理を最も速いスピードで実行するので、鳥は高スピードで左端まで移動します。本コードブロックを実行する前は、初期設定スクリプトにより鳥はX座標=308、Y座標=135にいるので、縦方向(Y座標)の位置は変わらずに左方向(X座標)にだけ移動するようになります。
  4. 一瞬でステージから姿を消す。
    ※処理3により鳥がステージの左に移動してから、本処理4が実行されるので、鳥がステージの左端まで移動したらステージから姿を消すようになります。
  5. 鳥の初期設定で移動させたX座標=308、Y座標=135と同じ位置に瞬間移動させる。
    ※初期設定のスクリプトと同じように、鳥は姿を隠したままステージの右上に待機しているような状態となります。
STEP.31
ロボットのスクリプトを作ろう

STEP.32
ロボットがサボテンや鳥にGoサインを出すスクリプト

  1. スタートボタンをタップしたら、下に連結したコードブロックが上から順に実行される。
  2. 一瞬でロボットの大きさが50%になる。
  3. 一瞬でステージから姿を消す。
  4. 以下の処理5-をずっと繰り返す。
  5. もしも、1か2を返すランダム値ブロックが1(真偽条件がTrue)だったとき、メッセージ「サボテン」を全てのスプライトに送る。
  6. 処理5の真偽条件がFalseなら(ランダム値ブロックが2だったら)、メッセージ「とり」を全てのスプライトに送る。
  7. 3.0秒~3.5秒間のいずれかの秒数だけ、スクリプトの実行をストップする。
    ※このロボットのスクリプトにより、3~3.5秒間隔でメッセージ「サボテン」か「とり」が送信されます。そして、そのメッセージを受け取った「サボテン」か「とり」がステージの右側に表示され左方向へ動き出すようになります。ゲームプレイヤーからは見えなくなりますが、このロボットが「サボテン」や「とり」に司令を出しています。
STEP.33
ホットケーキのスクリプトを作ろう

STEP.34
ホットケーキの初期設定スクリプト

  1. スタートボタンをタップしたら、下に連結したコードブロックが上から順に実行される。
  2. ホットケーキは恐竜の背面に移動する。
    ※ホットケーキと恐竜がステージで重なったとき、ホットケーキは恐竜に隠れるようになります。
  3. ホットケーキは指定したX座標=60、Y座標=160の位置に一瞬で移動する。
    ※スプライトを指定の座標に移動させるには、 の部分をタップして、 が表示されたら画面上のスプライトをドラッグして移動させたい場所に動かすか、X座標とY座標の値を入力する。
    にするとコードブロックの処理を一瞬で実行します。
STEP.35
ホットケーキと恐竜とのあたり判定

  1. ホットケーキが恐竜に触れたとき、下に連結したコードブロックが上から順に実行される。
  2. 「ムシャムシャ」の音を鳴らすと同時に、次のブロックを実行する。
    ※引数 を選択した場合、「ムシャムシャ」という音が鳴り終わる前、ほとんど音がなると同時に以下のコードブロックが実行されます。一方を選択した場合は、「ムシャムシャ」という音が鳴り終わってから以下のコードブロックが実行されます。音が鳴っている間、スクリプトの実行がストップするようにあります。
  3. ホットケーキが引数で指定した色、速さで輝く。
  4. 変数「得点」を1ずつ変える。
    ※つまり、恐竜がホットケーキにぶつかると、得点が1点増えます。
OctoStudioとは?

MITメディアラボ Lifelong Kindergartenグループによって開発された無料モバイルコーディングアプリです。

スマートフォンやタブレット上でアニメーションやゲームをつくることができます。 写真を撮ったり、音を録音して、ブロックでコーディングすることができます。またプロジェクトを友達や家族に送ることもできます。

スマートフォンやタブレットに対応しており、パソコンは非対応です(2024年時点)。

詳しくはOctoStudioのホームページをご覧ください。

Scratch3.0(スクラッチ3.0)とは?

MITメディアラボにより開発されたビジュアルプログラミング言語。子供たちが物語やゲーム、 アニメーションなどのインタラクティブな作品をプログラミングできる。また、自分の作った作品を世界中の人々と共有できるコミュニティーサイトでもある。世界中で1億人を超えるユーザがいる。
こちらのホームページにアクセスすれば無料で利用できる。