スクラッチ版スイカゲームをモバイル対応リミックスする事例

ok-scratch（執筆）

話題のスイカゲームをジョイスティックでモバイル対応！よりきめ細かい操作感でスイカを作れるぞ！

スターター
プロジェクト

リミックス用プロジェクトへ

サンプル

見本のプロジェクトへ

難しさ

★★★★★

タグ

任意）自分の作業中のスクラッチ作品URLを記録しておこう！再開するときに便利だよ。

※ この記録は今使ってるPCに保存されます。別のPCで作業するときは表示されません。

https://scratch.mit.edu/projects/

スクラッチプログラミングに挑戦している皆さん、どうも！スクラッチコーチです。

モバイル対応シリーズ

フルーツを落(お)として進化(しんか)させていき、大(おお)きなスイカを作(つく)ったりハイスコアを目指(めざ)すピースフルなゲーム、それが話題(わだい)沸騰(ふっとう)のスイカゲームだ！スクラッチ版(ばん)でもスイカゲームがたくさん作成(さくせい)されており、本家(ほんけ)に迫(せま)るクオリティを見(み)せているので驚(おどろ)き！今回(こんかい)はその中(なか)の１つをモバイルスティックを導入(どうにゅう)して完全(かんぜん)モバイル対応(たいおう)するという試(こころ)みだよ。リミックスさせていただいたのはこちらの作品(さくひん)！

ターボワープでプレイする紹介URLをコピーするハートを押しに行くメモを書く

非公開メモ（このパソコンだけに保存しています）

ジョイスティックの導入(どうにゅう)事例(じれい)として、一緒(いっしょ)にリミックス方法(ほうほう)を見(み)てみよう！一緒(いっしょ)にコーディングする人(ひと)はこの作品(さくひん)をリミックスしておいてね。

今回(こんかい)の目標(もくひょう)「ジョイスティックでスイカゲームの雲(くも)を動(うご)くようにリミックスする」

スイカゲームで移動(いどう)が必要(ひつよう)になるのは、上(うえ)に浮(う)かんでる雲(くも)だ。この子(こ)を動(うご)かしていく。実(じつ)はリミックスする前(まえ)から「モバイル」というコントロール方法(ほうほう)があって、タップすると雲(くも)がタップした場所(ばしょ)に瞬間(しゅんかん)移動(いどう)してフルーツを落(お)としてくれる。ただスイカゲームやってると落(お)とすところを正確(せいかく)に測(はか)って狙(ねら)い撃(う)ちするのが楽(たの)しいという面(めん)もあるから、瞬間(しゅんかん)移動(いどう)ではなくてジョイスティックを使(つか)ってゆっくり左右(さゆう)に移動(いどう)する方式(ほうしき)に変(か)えていきたいと思(おも)う。

完成(かんせい)品(ひん)の確認(かくにん)

モバイル対応(たいおう)した完成(かんせい)品(ひん)がこちら↓

ターボワープでプレイする紹介URLをコピーするハートを押しに行くメモを書く

非公開メモ（このパソコンだけに保存しています）

バックパックを導入(どうにゅう)する

リミックスした作品(さくひん)にスティックを導入(どうにゅう)していこうか。

バックパックに入(い)れる

一応(いちおう)モバイルのスティックをバックパック化(か)するところから紹介(しょうかい)するよ。もし自分(じぶん)のプロジェクトにスティックがないという人(ひと)は、チュートリアルで一緒(いっしょ)に作(つく)るか、こちらのプロジェクトからスティックをバックパックしちゃおう。

バックパックから取(と)り出(だ)す

ではリミックスしたスイカゲームを開(ひら)いて、今度(こんど)はバックパックからスティックを取(と)り出(だ)そう。

これで準備(じゅんび)OKだ！

雲(くも)の移動(いどう)方法(ほうほう)をスティックに変更(へんこう)する

スプライト「くも」を開(ひら)くと移動(いどう)方法(ほうほう)が実装(じっそう)されている箇所(かしょ)が見(み)つかるよ。メッセージ「GO2」を受(う)け取(と)ったときを見(み)てみてね。

モバイルとパソコンの移動(いどう)方法(ほうほう)があるね。前回(ぜんかい)のモバイル対応(たいおう)事例(じれい)では一部(いちぶ)を変(か)えてモバイル対応(たいおう)したけど、今回(こんかい)はごっそり削除(さくじょ)してスティックで移動(いどう)させる方式(ほうしき)に変更(へんこう)してみたいと思(おも)う。ずっとブロック内(ない)を全部(ぜんぶ)消(け)してみる。削除(さくじょ)後(ご)はこうなるよ。

ok-scratch

u003cpu003e一応(いちおう)書(か)いておくと、ダメだから全部(ぜんぶ)消(け)したわけではなく、今回(こんかい)は前回(ぜんかい)とは趣向(しゅこう)を変(か)えたものにしたいから消(け)しただけだよ。u003c/pu003e

X座標(ざひょう)をスティックXに合(あ)わせて変(か)える

ではスティックXの値(ね)を割(わ)り当(あ)ててみよう。

実(じつ)はたったこれだけでもそれなりに動(うご)くｗ

でも問題(もんだい)が２つ見(み)つかる。

最初(さいしょ)のタップでフルーツが落(お)ちてしまう
箱(はこ)のわくを越(こ)えた場所(ばしょ)に雲(くも)が移動(いどう)できてしまう

逆(ぎゃく)に言(い)えばこの２つを解決(かいけつ)したらリミックス完成(かんせい)だ！やってみよう。

わくの外(そと)に出(で)ないようにする

まずはわく問題(もんだい)から解決(かいけつ)していく。

ブロック定義(ていぎ)「_わくに触(ふ)れたか調(しら)べる」を作(つく)る

調(しら)べる系(けい)のブロック定義(ていぎ)を作(つく)っておくと早(はや)い。再(さい)描画(びょうが)無(な)しで１つ作(つく)っておくので、接頭語(せっとうご)にはアンダーバーを付(つ)けておこう。

ok-scratch

接頭語で変数やブロック定義などの種類をパッと見で分かるようにする方法は、コーディング規約としてまとめてあるよ。興味がある人はチェックしてね。

変数(へんすう)「わくに触(ふ)れたか」を作(つく)る

このブロック定義(ていぎ)の実行(じっこう)結果(けっか)を保持(ほじ)する変数(へんすう)を用意(ようい)しよう。

ここでの作戦(さくせん)内容(ないよう)

実際(じっさい)に移動(いどう)させる前(まえ)に、この再(さい)描画(びょうが)なしのブロック定義(ていぎ)の中(なか)で移動(いどう)をシミュレーションしてみる。その結果(けっか)、わくに触(ふ)れたら変数(へんすう)に１を、触(ふ)れてなければゼロを入(い)れるというのがここで作(つく)りたい処理(しょり)だよ。まずはいきなり変数(へんすう)にゼロを入(い)れてしまおう。

仮(かり)に移動(いどう)させてみる

次(つぎ)にくもを移動(いどう)させてみよう。これはブロック定義(ていぎ)の最(さい)後(あと)に戻(もど)すから、仮(かり)移動(いどう)みたいなものだよ。

わくに触(ふ)れたら変数(へんすう)を１にする

この状態(じょうたい)でわくに触(ふ)れているかどうかを調(しら)べればOKだ。

元(もと)の位置(いち)に戻(もど)す

触(ふ)れてても触(ふ)れてなくても、いったん元(もと)の位置(いち)に戻(もど)そう。

OK、これでブロック定義(ていぎ)内(ない)は完成(かんせい)だよ。

わくに触(ふ)れてない場合(ばあい)だけ実際(じっさい)に移動(いどう)させる

これをずっとブロック内(ない)で使(つか)っていくよ。

わくに触(ふ)れないかテストする！

よしよし、触(ふ)れる一瞬(いっしゅん)前(まえ)に止(と)まっているぞ！これで１つ目(め)の問題(もんだい)は解決(かいけつ)できた。

ok-scratch

u003cpu003eちなみにさっきのブロック定義(ていぎ)内(ない)で仮(かり)移動(いどう)をしっかり元(もと)の位置(いち)に戻(もど)してないと、触(ふ)れたが最後(さいご)、くもが動(うご)かなくなってしまうので注意(ちゅうい)。u003c/pu003e

スティックボタンでフルーツが落(お)ちるようにする

２つ目(め)の問題(もんだい)を解決(かいけつ)すると同時(どうじ)に、フルーツの落(お)とし方(かた)をスティックボタンを押(お)したタイミングに変(か)えていこう！今度(こんど)はスプライト「ゲーム本体(ほんたい)」を開(ひら)いてみて。

どうやって変更(へんこう)が必要(ひつよう)なスプライトを特定(とくてい)しているの？

u003cpu003eそこは他人(たにん)のプロジェクトなので、コードを読(よ)んで見抜(みぬ)くしか無(な)い。でも勘(かん)も頼(たよ)りになる。今回(こんかい)は落(お)ちるモノの動(うご)きを変(か)えたいから、コスチュームにフルーツが使(つか)われているものを探(さが)して特定(とくてい)したよ。u003c/pu003e