Scratchで美人時計[どけい]を作ろう

• まずは写真をとろう
• 1分ごとに背景[はいけい]がきりかわるようにしよう
• 写真にあわせて時計[とけい]を表示[ひょうじ]しよう
• 設定[せってい]ツールを作ろう
• さいごに

まずは写真をとろう

15枚[まい]くらいでOK

1分ごとに写真が切[き]り替[か]わるようにしていくのですが
じーっと時計[とけい]をながめつづけることはないので
15枚[まい]くらいあればけっこうそれっぽくなります。

もちろん枚数[まいすう]が多い方がいい！というひとは
たくさんとって、たくさん追加[ついか]しましょう。


今回はフリー写真を多数公開している「ぱくたそ」から
牛さんの画像[がぞう]をサンプルとして使わせて頂[いただ]きました。

ぱくたそは、おもしろ系[けい]からおしごと系[けい]まで
幅広[はばひろ]い写真素材[そざい]があるのでおススメのサイト

これを


このように「背景[はいけい]」に追加[ついか]していきましょう。

写真の上下に白いフチが入ってしまって、気になる方は
写真素材[そざい]をスクラッチで使えるようにしよう
こちらの記事を参考[さんこう]にして、写真を背景[はいけい]に使えるサイズにしましょう。

別[べつ]に余白[よはく]入ってても使えるので、気にならない人はそのままでOKです。

時計[とけい]を表示[ひょうじ]するためのスプライトも用意しよう

写真に時計[とけい]を表示[ひょうじ]するために
すうじのスプライトを用意しましょう。



スプライトライブラリーで、カテゴリーを「文字」にすると
さがしやすいです。自分でフォントを選[えら]んで作ってもOK！




あとは、「コスチューム」に数字をどんどん追加[ついか]しましょう。
１から順番[じゅんばん]に、1234567890 の10文字を追加[ついか]します。




ひとつできたら、「スプライトを右クリック→複製[ふくせい]」で
数字のスプライトをコピーします。

「12：00」のように表示[ひょうじ]したいので
中央の「：コロン」もお絵描[えか]きツールで描[えが]いて用意します。

1分ごとに背景[はいけい]がきりかわるようにしよう

サンプルプロジェクト

こちらにプログラム済[す]みのサンプルがあります

背景[はいけい]の数を調べよう

背景[はいけい]が何枚[なんまい]あるのかわからないと、きまった画像[がぞう]を出すことができないので
まずは背景[はいけい]の数を調べましょう。
（別[べつ]に何分がどの背景[はいけい]でもいい人は、よみとばしてOK）

背景[はいけい]の数を調べるブロックはないので、自力で調べます。



まずは背景[はいけい]のプログラムにこんな感じで組んでみましょう。
これは「今、何番の背景[はいけい]でも、背景[はいけい]を１にする」
ためのプログラム



こんな感じになります。





「背景[はいけい]１」にしたあと、さらに「前の背景[はいけい]」にします。
すると背景[はいけい]が一番最後[さいご]の背景[はいけい]になりますね。

ここで、背景[はいけい]の枚数[まいすう]を変数[へんすう]に保存[ほぞん]しておきます。

ただ、これだとスタートボタンを押[お]した時に
背景[はいけい]を切[き]り替[か]えているところが見えてしまうので
見えなくしてしまいましょう。


定義[ていぎ]ブロックの「画面を再描画[さいびょうが]せずに実行する」
にチェックをいれます。

こうしておくと、この定義[ていぎ]ブロックの中に入っているプログラムが
動いている間は、ステージの画面にはあらわれません。



定義[ていぎ]ブロックができたら、さっき作った背景[はいけい]を数えるプログラムを
この定義[ていぎ]ブロックに組み合わせます。

背景[はいけい]の枚数[まいすう]が決まったら
何分にどの背景[はいけい]を出すかを決めましょう。



今回は15枚[まい]背景[はいけい]を用意しているので
「0分・15分・30分・45分」のときには「背景[はいけい]1」（あまりが0になるから）
「1分・16分・31分・46分」のときには「背景[はいけい]2」（あまりが1になるから）
という感じになります。

「割[わ]ったあまり」を使うと、大きい数字がきても
1～15（背景[はいけい]の枚数[まいすう]）までの数字に変換[へんかん]することができるのです。

時間にかかわらず背景[はいけい]を1分おきにかえるなら

何分にどの背景[はいけい]…ということにこだわらないのなら

こんなふうにすることもできます。
こっちのほうがカンタンですね。

写真にあわせて時計[とけい]を表示[ひょうじ]しよう

それぞれの数字に時間を当てはめよう

時間と分を表示[ひょうじ]できるようにしましょう。



「時1」は10時までは使わないので隠[かく]しておきます。
演算[えんざん]ブロックの「○○の長さ」ブロックを使うと文字数がわかります。
（9だったら長さ1・10だったら長さ2）

これを使って、長さが２だったらコスチュームを表示[ひょうじ]するようにしておきましょう。


「現在[げんざい]の時」「現在[げんざい]の分」のブロックで今の時間がわかりますので
時間にあわせたコスチュームに変[か]えてあげましょう。

今回は時間だけですが年月日・曜日もわかるので
カレンダーみたいにすることもできますね。

何分のときは、どのスプライトにどの表示[ひょうじ]をさせればいいのか
考えながらプログラムしてみましょう。

コロンを時計[とけい]の中心にする

コロンの場所がかわると、他[ほか]の数字の場所も変[か]わるようにしてみましょう。
こうしておけば、場所を変[か]えるときに１つのスプライトだけを変[か]えればいいので
らくちんです。



大きさが変[か]わると、コロンからの距離[きょり]もかわりますので
「50×（コロンの大きさ/100）」で歩数を調節[ちょうせつ]していますが
↑ キホンになるのは左の数字です。




はなれているほど、数字の差[さ]が大きくなります。

リストにコロンの場所を保存[ほぞん]する

さて、これでコロンの場所と向きと大きさが変[か]われば
他[ほか]の数字も変[か]わるようになりましたね。

こんどは写真にあわせたコロンの場所を決めていきましょう。



上のようにすると、背景[はいけい]ナンバーに対応[たいおう]した場所・向き・大きさにすることができます。
リストには、あらかじめ場所・向き・大きさを入れておきましょう。

設定[せってい]ツールを作ろう

キーで上下左右に動かせるようにしよう

まずはコロンの場所や大きさをキーで変[か]えられるようにしましょう。
これはもうシューティングとかでやったことのある
プログラムだと思います。



このプログラムは「旗[はた]がクリックされたとき」はいりません。



場所を移動[いどう]させるときは表示用[ひょうじよう]のプログラムをちょっとはずしておきます。




スクリプトをクリックすると、やじるしキーで時計[とけい]の場所を変[か]えることができます。
これで、時計[とけい]の場所・大きさ・向きをカンタンに変[か]えることが
できるようになりましたね。

つぎに、リストに入れていくプログラムを作りましょう。

場所をリストに保存[ほぞん]できるようにしよう

背景[はいけい]をかえるプログラムも、ちょっと横においておきます。


背景[はいけい]を１に、メッセ―ジを受け取ったら次の背景[はいけい]になるようにプログラムします。


つぎに、「コロン」のプログラムにもどって

リストをからにします。


ｘ・ｙ・大きさ・向きをリストに入れるプログラムを作ります。
これもクリックして使うので、「はたがクリックされたとき」はいりません。




できたらさっそく使ってみましょう。
十字キーで場所をかえて、いい感じになったら
リストに追加[ついか]するプログラムをクリックします。

15枚[まい]全部の場所がきまったら
はずしておいたプログラムをもとにもどしておきましょう。

完成[かんせい]です

おつかれさまでした。

さいごに

今回の記事は「ツール」をみんなに作ってほしくて作りました。

リストとか使えるようになっても
データを手入力でいれたり、メンドクサイことしている人がけっこういるので
それもプログラムでやってほしい！と思ってました。

めんどくさい！とおもったら、プログラム！
いろいろためしてみて下さいね。