スタータープロジェクトカテゴリ

「Teraのドレスアップ」のプログラミングを確認

こちらでは、ゲームカテゴリの「Teraのドレスアップ」について、どのようにプログラミングされているかを詳しく解説していきます。「Tera」とは、キャラクターの名前でそのTeraに対して帽子であったりブラウスであったりドレスアップさせていきます。主な処理としては指定した位置へ移動させるといったプログラムを理解するとよいかと思います。

目次

作品(プロジェクト)事例をダウンロード

まずは、Scratchコミュニティーサイトで公開されている作品(プロジェクト)をダウンロードし「Dress Up Tera.sb2」をスクラッチに読み込みましょう。

①Scratchサポート教材のダウンロードページへアクセスします。

下記の「Scratchサポート教材」をクリックするとScratchサポート教材のダウンロードページが開きます。

②Starter Prohectsの「Download」をクリックします。

Scratchサポート教材のダウンロードページにアクセスしたらSupport Materialsの項目にあるStarter Prohectsの「Download」をクリックします。日本語表記の場合は、サポート素材の項目にあるスタータープロジェクトの「ダウンロード」をクリックします。

スクラッチサポート教材画面(スタータープロジェクト)

③ダウンロードが完了したら「Scratch2StarterProjects.zip」を実行します。

ダウンロードが完了するとGoogleクロームの場合、ブラウザーの左下にダウンロードされたzipファイルが表示されます。「Scratch2StarterProjects.zip」をクリックすると圧縮ファイルが解凍処理されフォルダが開きます。

Scratch2StarterProjects.zipを解凍

④「Scratch2StarterProjects」フォルダの中身を確認します。

圧縮ファイルが解凍処理されるとフォルダが開きます。

スタータープロジェクトフォルダ

フォルダの中身は以下のようなフォルダ構成となっており、それぞれのフォルダをダブルクリックするとスクラッチのファイル(***.sb2)が格納されています。ちなみに、「.sb2」の拡張子は「Scratch 2.0」用で、「Scratch 1.4」用の場合は「.sb」になります。こちらのファイルは全て「Scratch 2.0」用ですので、「Scratch 1.4」では起動することができません。

  • __MACOSX
  • Animation
  • Games
  • Interactive Art
  • Music and Dance
  • Stories
  • Video Sensing (webcam)

⑤「Scratch 2.0オンライン版」を起動させます。

下記の「Scratch 2.0オンライン版」をクリックすると「Scratch 2.0オンライン版」が表示されます。基本的には「Scratch 2.0オンライン版」で解説していきますが、「Scratch 2.0オフライン版」でも同様の流れになります。ただし、上記でも説明したように「Scratch 1.4」では開くことができません。

⑥「ファイル」>「手元のコンピューターからアップロード」をクリックします。

ツールバーの「ファイル」から「手元のコンピューターからアップロード」をクリックします。日本語表記になっていない場合は、言語を変更する必要がありますので、「スクラッチ言語変更」から言語変更してください。

スクラッチファイル取り込み処理

⑦「Dress Up Tera.sb2」ファイルを選択し、「開く」をクリックします。

ファイルを開くダイアログボックスが表示されたら、先ほどダウンロードした「Scratch2StarterProjects」フォルダの「Games」>「Dress Up Tera.sb2」を選択し、「開く」をクリックします。

スクラッチファイル選択

⑧「OK」をクリックします。

既存プロジェクトと置き換えるかのメッセージボックスが表示されたら、「OK」をクリックします。これで準備が完了しました。

スクラッチファイル取り込み確認

⑨取り込みが完了したら、「緑の旗マーク」をクリックします。

「Dress Up Tera.sb2」の取り込みが完了したら、ドレスアップTeraが表示されます。左上の「ステージ」が作品(プロジェクト)画面になります。こちらの「緑の旗マーク」をクリックします。

スクラッチポンゲームスタート

⑩ファッションアイテムをマウスでクリックしてドレスアップさせます。

「緑の旗マーク」をクリックすると右側にファッションアイテムが初期位置に並びます。それぞれをクリックすると左側のTeraキャラクターの指定位置へファッションアイテムが移動していきます。ファッションアイテムをクリックしていく順番によって重ね方が違いますので、お気に入りの重ね方にドレスアップさせます。

どのような動作をするのかだいたい把握したところで、続いて実際にプログラミングの中身について解説していきます。

Teraのドレスアップ

「Dress Up Tera」プログラミングの解説

こちらでは、まず「Dress Up Tera.sb2」で利用されているスプライト背景を確認してから、それぞれのオブジェクトにどのようなプログラミングがされているのかを1つ1つ解説していきます。

スプライト・背景の確認

まず、「Pong Starter.sb2」で利用されているスプライトと背景から確認していきましょう。

スプライト

スプライトは以下の8つが設定されています。

  • Tera
  • Cape
  • Mask
  • Hat
  • Blouse
  • Tshirt
  • Wings
  • Antennae

「Tera」スプライトはドレスアップさせるキャラクターです。初期設定では、向きは「90度」、回転の種類は「自由に回転」に設定されており、「プレイヤーにドラッグできるか」にチェックが付いています。こちらの設定は今回のプログラミングには一切影響しない設定になります。

また、コスチュームを確認すると「tera」が1つだけ設定されており、音を確認すると「pop」が設定されていますが、音はプログラミングに利用されていません。

Teraスプライトの設定内容

「Tera」スプライト以外の他のスプライトはすべてファッションアイテムです。初期設定では、向きは「90度」、回転の種類は「自由に回転」に設定されており、「プレイヤーにドラッグできるか」にチェックが付いています。こちらも「Tera」スプライトと同様に今回のプログラミングには一切影響しない設定になります。

その他のスプライトの設定内容

ファッションアイテムは以下になります。

  • ケープ
  • マスク
  • 帽子
  • ブラウス
  • Tシャツ
  • 触角

背景

続いて背景を確認すると以下の1つが設定されています。

  • backdrop1

「backdrop1」は下部に碧色した水平線が描かれているもので、音は「pop」が1つ設定されています。こちらの音はスクリプト(ブロックの塊)には利用されていません。

背景backdrop1の設定内容

プログラミングの確認

今回の「Teraのドレスアップ」では「Tera」スプライトに対してファッションアイテムをドレスアップさせるプログラムがそれぞれのスプライトでスクリプトエリアにプログラムが書かれています。こちらではそれぞれで設定されているプログラムの中身について詳しく解説していきます。

「Tera」スプライトのプログラミング

「Tera」には以下の1つのプログラムがスクリプトエリアに配置されています。

「Tera」スプライトのプログラミング全体

プログラミング1

「Tera」スプライトのプログラミング1

こちらでは、「イベント」スクリプトの「緑の旗マークがクリックされたとき」ブロックの下に「動き」スクリプトの「x座標を●、y座標を●にする」ブロック「見た目」スクリプトの「□と●秒言う」ブロックが配置されています。

それぞれの値には、「x座標を-115、y座標を-50にする」、「What should I wear?と2秒言う」が設定されており、緑の旗マークをクリックすると「Tera」スプライトがx座標:-115、y座標:-50の位置に移動され「What should I wear?(何を着たらいい?)」と2秒間言います。この位置と発言が「Tera」スプライトの初期位置になります。

「Cape」スプライトのプログラミング

「Cape」のプログラムを確認していきます。「Cape」には以下の2つのプログラムがプログラミングされています。

「Cape」スプライトのプログラミング全体

プログラミング1

「Cape」スプライトのプログラミング1

こちらでも、「イベント」スクリプトの「旗マークがクリックされたとき」ブロックからはじまり、「動き」スクリプトの「x座標を●、y座標を●にする」ブロックと「見た目」スクリプトの「表示する」ブロックが配置されています。

座標値には、「x座標を80、y座標を-80にする」が設定されており、緑の旗マークをクリックすると「Cape」スプライトがx座標:80、y座標:-80の位置に移動され表示されます。この位置が「Cape」スプライトの初期位置になります。

プログラミング2

「Cape」スプライトのプログラミング2

こちらでも、「イベント」スクリプトの「このスプライトがクリックされたとき」ブロックの下に「見た目」スクリプトの「前に出す」ブロックと「動き」スクリプトの「●秒でx座標を●に、y座標を●に変える」ブロックが配置されています。

設定値には、「1秒でx座標を-170に、y座標を-112に変える」が設定されており、「Cape」スプライトをクリックするとx座標:-170、y座標:-112の位置に1秒かけて移動し、どのスプライトよりも前に表示させます。

「Mask」スプライトのプログラミング

「Mask」のプログラムを確認していきます。「Mask」には以下の2つのプログラムがプログラミングされています。

「Mask」スプライトのプログラミング全体

プログラミング1

「Mask」スプライトのプログラミング1

こちらでも、「イベント」スクリプトの「旗マークがクリックされたとき」ブロックからはじまり、「動き」スクリプトの「x座標を●、y座標を●にする」ブロックと「見た目」スクリプトの「表示する」ブロックが配置されています。

座標値には、「x座標を180、y座標を100にする」が設定されており、緑の旗マークをクリックすると「Mask」スプライトがx座標:180、y座標:100の位置に移動され表示されます。この位置が「Mask」スプライトの初期位置になります。

プログラミング2

「Mask」スプライトのプログラミング2

こちらでも、「イベント」スクリプトの「このスプライトがクリックされたとき」ブロックの下に「見た目」スクリプトの「前に出す」ブロックと「動き」スクリプトの「●秒でx座標を●に、y座標を●に変える」ブロックが配置されています。

設定値には、「1秒でx座標を-100に、y座標を-30に変える」が設定されており、「Mask」スプライトをクリックするとx座標:-100、y座標:-30の位置に1秒かけて移動し、どのスプライトよりも前に表示させます。

「Hat」スプライトのプログラミング

「Hat」のプログラムを確認していきます。「Hat」には以下の2つのプログラムがプログラミングされています。

「Hat」スプライトのプログラミング全体

プログラミング1

「Hat」スプライトのプログラミング1

こちらでも、「イベント」スクリプトの「旗マークがクリックされたとき」ブロックからはじまり、「動き」スクリプトの「x座標を●、y座標を●にする」ブロックが配置されています。他のスプライトでは「見た目」スクリプトの「表示する」ブロックが配置されていましたが、こちらには配置されていません。特にプログラムには影響しませんが、おそらくつけ忘れかと思います。

座標値には、「x座標を80、y座標を110にする」が設定されており、緑の旗マークをクリックすると「Hat」スプライトがx座標:80、y座標:110の位置に移動され表示されます。この位置が「Hat」スプライトの初期位置になります。

プログラミング2

「Hat」スプライトのプログラミング2

こちらでも、「イベント」スクリプトの「このスプライトがクリックされたとき」ブロックの下に「見た目」スクリプトの「前に出す」ブロックと「動き」スクリプトの「●秒でx座標を●に、y座標を●に変える」ブロックが配置されています。

設定値には、「1秒でx座標を-122に、y座標を30に変える」が設定されており、「Hat」スプライトをクリックするとx座標:-122、y座標:30の位置に1秒かけて移動し、どのスプライトよりも前に表示させます。

「Blouse」スプライトのプログラミング

「Blouse」のプログラムを確認していきます。「Blouse」には以下の2つのプログラムがプログラミングされています。

「Blouse」スプライトのプログラミング全体

プログラミング1

「Blouse」スプライトのプログラミング1

こちらでも、「イベント」スクリプトの「旗マークがクリックされたとき」ブロックからはじまり、「動き」スクリプトの「x座標を●、y座標を●にする」ブロックと「見た目」スクリプトの「表示する」ブロックが配置されています。

座標値には、「x座標を160、y座標を0にする」が設定されており、緑の旗マークをクリックすると「Blouse」スプライトがx座標:160、y座標:0の位置に移動され表示されます。この位置が「Blouse」スプライトの初期位置になります。

プログラミング2

「Blouse」スプライトのプログラミング2

こちらでも、「イベント」スクリプトの「このスプライトがクリックされたとき」ブロックの下に「見た目」スクリプトの「前に出す」ブロックと「動き」スクリプトの「●秒でx座標を●に、y座標を●に変える」ブロックが配置されています。

設定値には、「1秒でx座標を-112に、y座標を-103に変える」が設定されており、「Blouse」スプライトをクリックするとx座標:-112、y座標:-103の位置に1秒かけて移動し、どのスプライトよりも前に表示させます。

「Tshirt」スプライトのプログラミング

「Tshirt」のプログラムを確認していきます。「Tshirt」には以下の2つのプログラムがプログラミングされています。

「Tshirt」スプライトのプログラミング全体

プログラミング1

「Tshirt」スプライトのプログラミング1

こちらでも、「イベント」スクリプトの「旗マークがクリックされたとき」ブロックからはじまり、「動き」スクリプトの「x座標を●、y座標を●にする」ブロックと「見た目」スクリプトの「表示する」ブロックが配置されています。

座標値には、「x座標を120、y座標を0にする」が設定されており、緑の旗マークをクリックすると「Tshirt」スプライトがx座標:120、y座標:0の位置に移動され表示されます。この位置が「Tshirt」スプライトの初期位置になります。

プログラミング2

「Tshirt」スプライトのプログラミング2

こちらでも、「イベント」スクリプトの「このスプライトがクリックされたとき」ブロックの下に「見た目」スクリプトの「前に出す」ブロックと「動き」スクリプトの「●秒でx座標を●に、y座標を●に変える」ブロックが配置されています。

設定値には、「1秒でx座標を-113に、y座標を-102に変える」が設定されており、「Tshirt」スプライトをクリックするとx座標:-113、y座標:-102の位置に1秒かけて移動し、どのスプライトよりも前に表示させます。

「Wings」スプライトのプログラミング

「Wings」のプログラムを確認していきます。「Wings」には以下の2つのプログラムがプログラミングされています。

「Wings」スプライトのプログラミング全体

プログラミング1

「Wings」スプライトのプログラミング1

こちらでも、「イベント」スクリプトの「旗マークがクリックされたとき」ブロックからはじまり、「動き」スクリプトの「x座標を●、y座標を●にする」ブロックと「見た目」スクリプトの「表示する」ブロックが配置されています。

座標値には、「x座標を120、y座標を-80にする」が設定されており、緑の旗マークをクリックすると「Wings」スプライトがx座標:120、y座標:-80の位置に移動され表示されます。この位置が「Wings」スプライトの初期位置になります。

プログラミング2

「Wings」スプライトのプログラミング2

こちらでも、「イベント」スクリプトの「このスプライトがクリックされたとき」ブロックの下に「見た目」スクリプトの「●層下げる」ブロックブロックと「動き」スクリプトの「●秒でx座標を●に、y座標を●に変える」ブロックが配置されています。

設定値には、「1秒でx座標を-113に、y座標を-102に変える」と「100層下げる」が設定されており、「Wings」スプライトをクリックするとx座標:-120、y座標:-85の位置に1秒かけて移動し、更に100層下げるというのは一番後ろ側に配置させるということになります。

分かりやすく100層と設定されていますが、どのスプライトよりも後ろ側に配置したいということで100が設定されているのかと思います。

「Antennae」スプライトのプログラミング

「Antennae」のプログラムを確認していきます。「Antennae」には以下の2つのプログラムがプログラミングされています。

「Antennae」スプライトのプログラミング全体

プログラミング1

「Antennae」スプライトのプログラミング1

こちらでも、「イベント」スクリプトの「旗マークがクリックされたとき」ブロックからはじまり、「動き」スクリプトの「x座標を●、y座標を●にする」ブロックと「見た目」スクリプトの「表示する」ブロックが配置されています。

座標値には、「x座標を140、y座標を110にする」が設定されており、緑の旗マークをクリックすると「Antennae」スプライトがx座標:140、y座標:110の位置に移動され表示されます。この位置が「Antennae」スプライトの初期位置になります。

プログラミング2

「Antennae」スプライトのプログラミング2

こちらでも、「イベント」スクリプトの「このスプライトがクリックされたとき」ブロックの下に「見た目」スクリプトの「前に出す」ブロックと「動き」スクリプトの「●秒でx座標を●に、y座標を●に変える」ブロックが配置されています。

設定値には、「1秒でx座標を-110に、y座標を20に変える」が設定されており、「Antennae」スプライトをクリックするとx座標:-110、y座標:20の位置に1秒かけて移動し、どのスプライトよりも前に表示させます。

実際にスクラッチゲームで遊んでみよう!

プログラムの中身を理解したら実際に遊んで見ましょう!ひとつひとつの動作がどのようにプログラムされているのかを理解できればそんなに難しいプログラミングではないので、実際に遊びながらどのようにスクラッチでプログラミングされているか確認してください。

まとめ

今回は、「Teraのドレスアップ」について解説しました。こちらは、衣装や装飾品のスプライトをクリックすることで、1秒かけて「Tera」スプライトにドレスアップさせる機能になります。例えば、ドレスアップさせる順番などをルールとして設けて正しいドレスアップの方法ができているかをゲーム化させることもできます。

このように新しい機能を追加すればオリジナルのおもしろいポンゲームができますので、是非スクラッチでプログラミングに挑戦してみてください。

スタータープロジェクト

Scratchコミュニティーサイト提供のサポート教材「スタータープロジェクト」の作品(プロジェクト)は、「ゲーム」「アニメーション」「インタラクティブアート」「ストーリー」「webカメラ」の5つのカテゴリでまとめられています。

アニメーション

  • カニのアニメーション
  • ダンスパーティー
  • グリーティングカード
  • Picoショー

インタラクティブアート

  • Goboでペイント
  • サウンドフラワー
  • スパイラルマーカー
  • 魔法使いの呪文

ストーリー

  • 自己紹介(5つの事柄)
  • Howlerの紹介
  • お城のストーリー
  • バーチャルツアー

webカメラ

  • バブルビデオセンシング
  • ミュージカルボタン
  • ピザ職人
  • ミニフィグを救出
スクラッチプログラミング入門

スクラッチプログラミング入門

Scratchは、MITメディアラボが開発した子ども向けビジュアルプログラミング言語です。
スクラッチプログラミング入門では、スクラッチの基本的な使い方から複雑なプログラムの作り方まで子供たちが楽しく学ぶための教育サイトです。

TOP