スクラッチでキャラクターがオシャレできる「着せ替えゲーム」を作ってみない?

どんな服や小物を着せ替えするか、ワクワクするね!

チュートリアルは、スクラッチのサイトの「ヒント」から入れるよ。

キャラクターの選択

着せ替えのキャラクターを選ぶんだけど、ねこはいらないから消しちゃおうね。

①ハサミをクリック

②ねこをクリック

でステージからねこが消えるよ。

新しいスプライトを追加するよ。

ステージ下のアイコンをクリックしてスプライトライブラリーを開いてね。

テーマ「着飾る」をクリックして、「Dani」を選択して「OK」をクリックしよう。

ステージに「Dani」が追加されたよ。

背景を追加する

ステージ下の背景のアイコンをクリックして、背景ライブラリーを開いてね。

「その他」にある「stripes」をクリックして、「OK」をクリックしよう。

ステージに背景が追加されて楽しくなってきたね!

 ルックスを選ぶ

スプライトに複数のコスチュームがある場合は、見た目を変えられるよ。

①ステージ下の「サムネイル」をクリック

②「コスチューム」をクリック

好みのコスチュームを選択しよう。

今回は、ポニーテールの女の子を選んだよ。

スプライトの色は、自由に変えられるんだ。

①好きな色をクリック

②「図形の色」をクリック

③色を変えたい箇所をクリック(今回は髪の毛)

同じようにして、肌の色と洋服も変えてみたよ。

まったく違った印象になったね!

お話する

スペースキーを押したとき、キャラクターが何かしゃべるようにするよ。

スクリプトの「イベント」をクリックして、「スペースキーが押されたとき」をドラッグしてね。

スクリプトの「見た目」から「Hello!と2秒言う」をドラッグしてね。

「Hello!」にカーソルをあてて消してから「かわいくしてね!」と入力しよう。

これで、スペースキーを押したときに

スプライトが「かわいくしてね!」と言うようになったよ。

着せ替えアイテムを追加する

さっそくアイテムを追加するよ!

ステージ下のスプライトのアイコンをクリックして、スプライトライブラリーを開こう。

「着飾る」をクリックして、「Shirt(シャツ)」を選択したら「OK」をクリックしよう。

ステージに「Shirt(シャツ)」が追加されたよ。

クリックしたら、シャツの色が変わるようにしよう!

スクリプトの「見た目」をクリックして、「色の効果を25ずつ変える」をドラッグしてね。

スクリプトの「イベント」をクリックして、「このスプライトがクリックされたとき」をドラッグしよう。

スプライトにシャツを着せてシャツをクリックしてみよう。

好みの色のシャツになるまでためしてみてね。

「停止●」をクリックすると、シャツの色がリセットされるよ。

スタイルを変更する

このシャツのスプライトには、長袖そでもあるんだ。

コスチュームが複数あるときは、切りかえができるよ。

 

コスチュームの数をしらべるには、「コスチューム」をクリックしてみてね。

コスチュームを切りかえるスクリプトを作るよ。

「スクリプト」をクリックして、「スペースキーが押されたとき」をドラッグしてね。

プルダウンメニュー▼をクリックして、「スペース」を「C」にかえよう。

「見た目」をクリックして、「次のコスチュームにする」をドラッグしよう。

これで、「C」をクリックすると長袖のシャツに切りかわるようになったよ。

もちろん、長そでのシャツもクリックするとコスチュームの色が変わるよ!

スタート位置をセットする

スタート🚩をクリックしたときに、スプライトが元の位置になるようにセットしよう。

まずは、ステージ下の「Dani」をクリックしてね。

スクリプトの右上のほうを見ると、「Dani」ところの座標が記されてるね。

x=-133

y=28

のところに「Dani」は居るんだ。

 

「イベント」をクリックして、「🚩がクリックされたとき」をドラッグしてね。

「動き」をクリックして、「X座標を-133、y座標を28にする」をドラッグしよう。

これで、スプライトがどこに居てもスタート🚩をクリックすれば元の位置に戻るようになったよ。

シャツもスタート🚩をクリックしたら決まった位置に戻るようにしておこう。

 

ステージ下のシャツをクリックしてね。

シャツの座標は

X=-31

Y=18

だよ。

 

スクリプトの「イベント」をクリックして、「🚩がクリックされたとき」をドラッグしよう。

「動き」をクリックして、「X座標を-31、y座標を19にする」をドラッグしてね。

これで、シャツがどこにあったとしても🚩をクリックすれば元の位置にセットされるようになったよ。

洋服をレイアウトする

シャツの他にも、いろいろアイテムがあったほうが楽しいよね。

スプライトライブラリーを開いてアイテムを追加しよう。

 

ステージ下のスプライトのアイコンをクリックしてね。

「着飾る」にあるアイテムなら、何を追加しても大丈夫だよ。

これらのアイテムも、クリックしたら色が変わるようにスクリプトを組んでね。

 

複数のコスチュームがあるものは、「c」を押したら切りかわるようにしておこう。

🚩をクリックしたときは元の位置にセットされるようにしようね。

同じスクリプトをコピーしたいときは、スクリプトをドラッグするとコピーできるよ。

たとえば、シャツのスクリプトをコピーしてリボンのアイコンの上にドラッグするんだ。

これで、リボンのスクリプトエリアにシャツと同じスクリプトがコピーできたよ。

コスチュームの色が変わったり服が長そでになったりするから、着せ替えが何倍も楽しくなるね!

改造とパーソナライズ

自分で描いたアイテムをスプライトに着せてみよう。

ステージ下の「新しいスプライトを描く」のアイコンをクリックしてね。

イチから洋服を描くのは難しいから、今ある洋服をアレンジするよ。

「新しいコスチューム」の下にある「ライブラリーからコスチュームを選択」のアイコンをクリックしてね。

コスチュームライブラリーから、「着飾る」をクリックして「shirt-b」を選択して「OK」をクリックしよう。

この長そでシャツを、サンタ服にアレンジするよ。

①パレットで「赤」を選択してから、②「図形の色」をクリックして

③赤くそめたいところをクリックしてね。

次は、サンタ服の白いボタンを描くよ。

①「楕円」ツールをクリックして、②ボタンを2つ描いてね。

①パレットで「白」を選択して、②「図形の色」をクリックして③ボタンを白く塗りつぶそう。

①「選択」をクリックして、②白いボタンを選択したら③赤い服の上にドラッグしよう。

だいぶサンタ服っぽくなったね!

ここに、白のモコモコを付けるよ。

①パレットの「黒」を選択して、②「楕円」を使って③モコモコを描いてね。

モコモコを白く塗りつぶすよ。

①パレットの「白」を選択して、②図形の色をクリックしてから③モコモコをクリックしてみてね。

①「選択」をクリックして、②白いモコモコを服の上に少しドラッグしよう。

サンタ服がリアルになったね!

もともと着せ替えできる服をアレンジしただけだから、スプライトにピッタリの大きさだよ。

このサンタ服にも色が変わるスクリプトと元の位置に戻るスクリプトを追加してね。

スカートは、筆と塗りつぶしで描いたよ。

出来たスカートをスプライトに着せてみたら、ちょっと大きかったんだ。

スカートを縮小しなきゃね。

①縮小アイコンをクリックして、②スカートをクリックしてね。

何度か縮小して、スプライトにピッタリの大きさにしよう。

スカートを縮小して、スカートの上にも「楕円」を使って

白いモコモコを描いてみたよ。

スカートにも、クリックで色が変わるスクリプトと

元の位置に戻るスクリプトを書いておこう。

コスチュームライブラリの「着せ替え」にある靴をアレンジしてブーツも作ってみたよ。

靴に図形の四角と楕円を組みあわせて色を付けてブーツにしたんだ。

ブーツにも、色が変わるスクリプトと元の位置に戻るスクリプトを加えてね。

自動で着せ替えできるようにする

マウスでドラッグして着せ替えするのはメンドクサイから、コスチュームをクリックするだけで着せ替えができるようにするよ。

まずは、スプライトにシャツを着せてみよう。

このときのxとyの座標は

x=-138

y=23

だね。

 

スクリプトの「動き」をクリックして、「1秒でx座標を-138に、y座標を23に変える」を

「このスプライトがクリックされたとき」の一番下にドラッグしよう。

これで、アイテムをクリックしただけで着せ替えが楽しめるようになったよ。

他のアイテムも同じようにプログラミングしてね。

背景を変えよう

ステージ下の背景のアイコンをクリックして、背景ライブラリーを開こう。

「休日」をクリックして、「winter」を選択したら「OK」をクリックしよう。

「winter」の背景も素敵だね!

「winter」の背景にスクリプトを組んでいくよ。

右矢印をクリックしたときに、「winter」の背景に切りかわるようにするんだ。

 

「スクリプト」の「イベント」をクリックして、「スペースキーが押されたとき」をドラックしよう。

「スペースキー」の▼をクリックして、「右向き矢印」にしてね。

「見た目」をクリックして、「次の背景」をドラッグしてね。

これで右向き矢印を押せば背景が切りかわるようになったんだけど、🚩をクリックした時はスプライトの背景にリセットしたいよね。

スクリプトの「イベント」をクリックして、「🚩がクリックされたとき」をドラッグしよう。

「見た目」をクリックして、「背景をwinterにする」をドラッグしてね。

「winter」の▼をクリックして、「strips」にしよう。

これで、スタートをクリックした時に背景が「strips」にセットされるようになったよ。

プロジェクトを共有

さっそくプロジェクトを共有しよう。

ステージ上のタイトル蘭に「オシャレをしよう」って入力してね。

画面右上の「共有」をクリックしてね。

「使い方」と「メモと作品への貢献」を入力してね。

遊んでみよう

アイテムをクリックすると、着せ替えができるよ。好きな色になるまでクリックしてね。

キーボードの「C」を押すと切り替わるコスチュームがあるよ。右矢印を押すと背景が変わるよ。