スクラッチ着せ替えゲームアイキャッチ画像

スクラッチで着せ替えゲームを作ろう!例をあげて解説します

スクラッチ着せ替えゲームアイキャッチ画像

スクラッチで、簡単にゲームを作りたい!

そんな方に、私の作成した「どの色にしようかな?ゲーム」を、ご紹介していきます。

画像通りに進めることで、1つのゲームが仕上がります。

スクラッチ(SCRATCH)のダウンロード方法は「スクラッチをダウンロードする方法【簡単プログラミング学習】」をご覧ください。

おみくじ編は「スクラッチ簡単ゲームの作り方【おみくじ編】」で解説しています。

タロットカード占いは「スクラッチでタロットカード占いを作る方法」で解説しています。

スポンサーリンク

スクラッチで着せ替えゲームを作ろう!例をあげて解説します

それでは、完成から見てみましょう。

スマホ用に設定しているので、少し小さいと思いますが、最後にもう一度大きいものを載せますので、試してみてください。

丸い色を女の子にもっていくと、その色の服になるという単純なゲームです。

チェックや、花柄を入れるとより楽しくなりそうですね。

早速ゲームを作ってみよう

スクラッチダウンロード4

スクラッチ(SCRATCH)お馴染みのスタート画面です。

必要な画像を準備する

まずは、必要な画像を選択していきます。

コスチュームを選択する

コスチュームの欄を選んで下の欄の動物にカーソルをおきます。

おみくじゲーム1

虫眼鏡のマークを、クリックします。

そうすると、コスチュームを選ぶが出てくるので、好きなキャラクターを選択します。

スクラッチキャラ選択画像01

今回はポニーテールの女の子を選んでみました。

背景を選択する

背景も同様に、最初の画面の右下より選択していきます。

おみくじゲーム2

ここも虫眼鏡で自分の好きな背景を選びます。

今回は着替えをするので女の子らしい部屋を選択しました。

カラーの丸ボタンを作る

コスチュームの描くを選び、○を選択して丸を描きます。

丸を作る画像01

丸の色は何でもいいです。

キャラクターに着させたい色を塗っていきます。

今回は4色丸を作りましたが、何個でも作ることは可能です。

丸を服型にするのも面白いです。

花柄やチェックもぜひ作ってみてくださいね。

カラーに合わせた服のキャラを作る

今回は「赤・紫・黄色・緑」の丸カラーを作りました。

その丸と同じカラーの服を着たキャラを作成します。

おきがえキャラクター画像01

塗りつぶしツールで簡単に服を塗りつぶすことができます。

塗りつぶしの横の四角でカラーの選択ができます。

丸で作ったものと同じ色の服を着てもらいましょう。

画像を良い位置に設定する

アイテムとキャラクターと背景の位置を整えます。

キャラクターと丸の位置画像01

綺麗に整えられたらプログラミングを開始していきます。

丸はわかりやすいように少し大きめにしています。小さい方がいいなという方は、大きさの欄で大きさが変えられます。
「100」は100%で、100以下の数字に設定すると小さくなり、100以上の数字にすると大きくなります。

プログラミングをする

画像が準備できたので、早速プログラムを組んでいきます。

どんなゲームなのか説明する

はじめは、どんなゲームなのかわかりません。

なので、服の色を選ぶゲームなんだとわかるように、キャラクターが話すようにプログラミングします。

スタートの旗が押されたときの設定です。

きせかえプログラミング画像01

「どの色にしようかな?」と言ってから、ゲームが始まるようにします。

カラーをドラッグできるようにする

丸のカラーをドラッグすると、そのカラーになるようにプログラミングしていきます。

きせかえプログラミング画像02

上記のドラッグ「できる」ようにするを、丸カラー全部にプログラムします。

先ほどの「色選択」の発信をつけたのは、全体にスタートを送りたいからです。

旗を押されてドラッグできるようにするのも可能です。

キャラクターの服の色を変える

丸いカラーがドラッグできるようになったら、キャラクターの服の色が変わるようにプログラミングしていきます。

例えば、「赤い丸いカラーがドラッグされれば赤い服を着る」という風にプログラムしてみましょう。

きせかえプログラミング画像03

スプライト1は赤カラーなので、赤い服を着たキャラクターを表示するように設定します。

・もし○○に触れたなら→丸いカラーがドラッグされてキャラクターに触れたなら

・コスチュームを○○にする→○○色の服を着たキャラクターに変更する

何色がきても色が変わるように、ずっとをつけます。

「色決定を送る」はとても大切になりますので、入れておきましょう。

色を決定した後

なぜ「色決定を送る」が大切なのかと言うと、下の画像のように1回色を決定したら元の位置に丸いカラーを戻したいからです。

元の位置のX座標とY座標を全ての丸いカラーにプログラミングします。

きせかえプログラミング画像04

カラーを戻さないと、1つ以上のカラーがキャラクターに触れてしまい、どの色の服を着ていいかわからなくなるというバグが出てしまうためです。

キャラクターに触れるのは1つだけにすることが、バグを防ぐシステムになります。

・1つカラーが選ばれるたびに、丸いカラーは全部元の位置に戻るようにします。

着せ替えゲーム完成!

いかがでしょうか?

「どの色にしようかな?ゲーム」ができたでしょうか?

(PC用に大きく表示しています)

同じ要領で福笑いゲームも作成してみました。

スクラッチで着せ替えゲームを作ろう!例をあげて解説します:まとめ

スクラッチは簡単操作で色々なゲームが作れます。

プロフィール画像
Halu
着せ替えゲームは幅が広いので、色んなものが作れそうですね!

この「どの色にしようかな?ゲーム」を元に、他にも着せ替えゲームを作りました。

眼鏡やアクセサリーがドラックできて自分の好きな所に着けられます。

今回と同じ要領で簡単な福笑いゲームも作ってみました。

1つのものから幅広い想像ができて楽しいです。

是非試してみてくださいね!

人気記事 【話題の本】メモの魔力で抽象化してみる【例をあげて解説】

人気記事 看護師5年目で転職したその後は?良かったこと・悪かったこと

\本の2冊目がでました!/

やる気が出るためのメソッド!

kindleストア カテゴリー ランキング
ビジネスライフ部門で2位を獲得!!

スクラッチ着せ替えゲームアイキャッチ画像
最新情報をチェックしよう!