美人<ruby><rb>時計</rb><rp>[</rp><rt>どけい</rt><rp>]</rp></ruby>


昔ちょっと話題になった「美人時計[どけい]
1分ごとにきりかわるスライドショーみたいな時計[とけい]のことです。
[]きな写真を時計[とけい]にできたらちょっと楽しいですよね。

たくさんの写真を使うのはムズカシイので
写真にあわせて時間を[]きな場所に
表示[ひょうじ]できるようにプログラムしてみましょう。



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


まずは写真をとろう

15[まい]くらいでOK


美人<ruby><rb>時計</rb><rp>[</rp><rt>どけい</rt><rp>]</rp></ruby>2
1分ごとに写真が[][]わるようにしていくのですが
じーっと時計[とけい]をながめつづけることはないので
15[まい]くらいあればけっこうそれっぽくなります。

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


今回はフリー写真を多数公開している「ぱくたそ」から
牛さんの画像[がぞう]をサンプルとして使わせて[いただ]きました。
moo5
ぱくたそは、おもしろ[けい]からおしごと[けい]まで
幅広[はばひろ]い写真素材[そざい]があるのでおススメのサイト

これを
WS0884

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

写真の上下に白いフチが入ってしまって、気になる方は

こちらの記事を参考[さんこう]にして、写真を背景[はいけい]に使えるサイズにしましょう。


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


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

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

WS0885

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

美人<ruby><rb>時計</rb><rp>[</rp><rt>どけい</rt><rp>]</rp></ruby>3


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


美人<ruby><rb>時計</rb><rp>[</rp><rt>どけい</rt><rp>]</rp></ruby>4

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

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

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

サンプルプロジェクト

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

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

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

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

WS0887

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

haikei

こんな感じになります。



WS0888

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

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

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

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

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

WS0891

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

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

WS0892

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

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


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

何分にどの背景[はいけい]…ということにこだわらないのなら
WS0905
こんなふうにすることもできます。
こっちのほうがカンタンですね。

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

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

美人<ruby><rb>時計</rb><rp>[</rp><rt>どけい</rt><rp>]</rp></ruby>5
時間と分を表示[ひょうじ]できるようにしましょう。


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

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

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

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

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


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

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

WS0896

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


美人<ruby><rb>時計</rb><rp>[</rp><rt>どけい</rt><rp>]</rp></ruby>6

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

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

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

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

WS0897

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


美人<ruby><rb>時計</rb><rp>[</rp><rt>どけい</rt><rp>]</rp></ruby>7


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

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

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

WS0898

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

WS0900

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

tool


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

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


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

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

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


つぎに、「コロン」のプログラムにもどって
WS0903
リストをからにします。

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


tool2

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

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

完成[かんせい]です

おつかれさまでした。
WS0886


さいごに

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

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

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