皆さんはアイコンメーカーを使ったことがありますか?
ツイッターのアイコンや、自分の似顔絵メーカーなど
検索してみると、色んな種類のアイコンメーカーが出てきますよね。
今回は、そんなアイコンメーカーをオリジナルで作ってみましょう。
個性的なアイコンメーカーができたら、他の人が使ってくれるかもしれませんよ。
今回参考にするのはこちらhttp://scratch.mit.edu/projects/43732696/

を押して、いちどキャラクターを作ってみて下さい。
髪や顔をクリックすると、コスチュームが変わります。
また、左右の矢印ボタンを押すと、顔のパーツを変えられます。
だいたいの動きがわかったら、さっそく「中を見る」でスクリプトを見てみましょう。
だいたい、顔・かみがた・目・鼻・口 ぐらいでしょうか。
キャラクターが人ではなく、動物やモンスターなら もう少しパーツが少なくてもいいかもしれないですね。

パーツごとに、コスチュームを追加しましょう。
顔パーツなら、顔のスプライトの「コスチューム」タブをクリックして
顔型を作っていきましょう。

同じ形で、色だけ変えたい時や、一部分だけ変えたい時は
コスチュームを「右クリック」して「複製」を選ぶと
そのコスチュームがコピーされます。

同じように、目・鼻・口・眉毛 などのパーツも作っていきましょう。
「messageを送る」「messageを受け取ったら」というブロックを使う方法もありますが
今回はもっとシンプルなプログラムになっています。

目のスクリプトはこれだけ!

そして、目のコスチュームを変更するための矢印ボタンの中身はこうなっています。
マウスポインターに触れたときに、矢印のコスチュームを変えているのは
マウスオーバーしたかどうかを、見やすくするためですね。
そして「クリックされたとき」に、Eyes(目)の変数の中を+1しています。
目のスクリプトでは、ずっと変数が変わったかどうかを確認していますから
ここで変数の中身がかわると、コスチュームも変わるようになっているんですね。
左向き矢印のスクリプトは、逆に変数の中身を-1しています。
これと同じように、鼻や口のパーツも、変数をつかって変更するようにしてみましょう。
(変数を作るには、「データ」から「変数を作る」ボタンを押して作ってね。
変数を使ってクッキークリッカーを作ろう も参考にしてみてね。)
線の色は変えたくないので、線と髪の塗りは、別のスプライトになっています。
さらに、髪の明るさを変えたいので、白色のスプライトも用意しています。

めんどくさいときは、線ナシで塗りだけにしてもOK!

重ねる順番はこんなかんじ。
白いスプライトを線と塗りの間にはさんで
「幽霊」の効果で半透明にすることで、「明るさ」を再現しています。

「塗り」のスクリプトはこうなっています。
色の効果と、明るさの効果を、ずっと変数の値に応じて変化させていますね。
そして、この変数の中身を、スライダーで変更しています。
(むずかしいときは、既存の変数スライダー機能をつかってもOK!)

これがスライダーのツマミ(Slider Grab)のスクリプト。
マウスが押されているときにツマミを動かせるようになっています。
スライダーからはみ出しそうになったら位置を調節。

そして、ツマミの位置調節スクリプトとは別に
変数に値を保存する用のスクリプトもあります。
スライダーまでの距離が、プラスかマイナスかを判定し
マイナスの場合は、変数の値もマイナスに設定しています。

スライダーまでの距離を、変数に入れれば
その値に応じて、明るさや色が変化します。
ランダムボタンの実装もラクチンです。

変数の中身を、「乱数」のブロックでランダムにするだけ!
コスチュームの数に応じて、ランダムの数値は変えて下さいね。
髪型や顔型はクリックで変更するタイプなので
そこだけは、「random」のメッセージを送って対応しています。
プログラミングって難しく聞こえるんですが
Scratchなら、誰でも簡単にプログラミングできるので
色んな人に自分のイラストを使ってもらえるようなプロジェクトを作ってもらいたいなと思います。
この記事がよかった!という方は「B!」ボタンや
ツイッターのアイコンや、自分の似顔絵メーカーなど
検索してみると、色んな種類のアイコンメーカーが出てきますよね。
今回は、そんなアイコンメーカーをオリジナルで作ってみましょう。
個性的なアイコンメーカーができたら、他の人が使ってくれるかもしれませんよ。
今回参考にするのはこちらhttp://scratch.mit.edu/projects/43732696/


髪や顔をクリックすると、コスチュームが変わります。
また、左右の矢印ボタンを押すと、顔のパーツを変えられます。
だいたいの動きがわかったら、さっそく「中を見る」でスクリプトを見てみましょう。
各パーツの画像をじゅんびしよう
まずは、作りたいパーツを準備しましょう。だいたい、顔・かみがた・目・鼻・口 ぐらいでしょうか。
キャラクターが人ではなく、動物やモンスターなら もう少しパーツが少なくてもいいかもしれないですね。

パーツごとに、コスチュームを追加しましょう。
顔パーツなら、顔のスプライトの「コスチューム」タブをクリックして
顔型を作っていきましょう。

同じ形で、色だけ変えたい時や、一部分だけ変えたい時は
コスチュームを「右クリック」して「複製」を選ぶと
そのコスチュームがコピーされます。

同じように、目・鼻・口・眉毛 などのパーツも作っていきましょう。
ボタンでコスチュームを変更
左右の矢印ボタンで、コスチュームを変えるようにするには「messageを送る」「messageを受け取ったら」というブロックを使う方法もありますが
今回はもっとシンプルなプログラムになっています。

目のスクリプトはこれだけ!

そして、目のコスチュームを変更するための矢印ボタンの中身はこうなっています。
マウスポインターに触れたときに、矢印のコスチュームを変えているのは
マウスオーバーしたかどうかを、見やすくするためですね。
そして「クリックされたとき」に、Eyes(目)の変数の中を+1しています。
目のスクリプトでは、ずっと変数が変わったかどうかを確認していますから
ここで変数の中身がかわると、コスチュームも変わるようになっているんですね。
左向き矢印のスクリプトは、逆に変数の中身を-1しています。
これと同じように、鼻や口のパーツも、変数をつかって変更するようにしてみましょう。
(変数を作るには、「データ」から「変数を作る」ボタンを押して作ってね。
変数を使ってクッキークリッカーを作ろう も参考にしてみてね。)
スライダーで髪の色を変えよう
このプロジェクトでは、自作のスライダーを使って、髪の色を変更していますね。線の色は変えたくないので、線と髪の塗りは、別のスプライトになっています。
さらに、髪の明るさを変えたいので、白色のスプライトも用意しています。

めんどくさいときは、線ナシで塗りだけにしてもOK!

重ねる順番はこんなかんじ。
白いスプライトを線と塗りの間にはさんで
「幽霊」の効果で半透明にすることで、「明るさ」を再現しています。

「塗り」のスクリプトはこうなっています。
色の効果と、明るさの効果を、ずっと変数の値に応じて変化させていますね。
そして、この変数の中身を、スライダーで変更しています。
(むずかしいときは、既存の変数スライダー機能をつかってもOK!)

これがスライダーのツマミ(Slider Grab)のスクリプト。
マウスが押されているときにツマミを動かせるようになっています。
スライダーからはみ出しそうになったら位置を調節。

そして、ツマミの位置調節スクリプトとは別に
変数に値を保存する用のスクリプトもあります。
スライダーまでの距離が、プラスかマイナスかを判定し
マイナスの場合は、変数の値もマイナスに設定しています。

スライダーまでの距離を、変数に入れれば
その値に応じて、明るさや色が変化します。
ランダムボタンの実装
変数の中身を変えるだけで、コスチュームがかってに変わってくれるのでランダムボタンの実装もラクチンです。

変数の中身を、「乱数」のブロックでランダムにするだけ!
コスチュームの数に応じて、ランダムの数値は変えて下さいね。
髪型や顔型はクリックで変更するタイプなので
そこだけは、「random」のメッセージを送って対応しています。
まとめ
今回の記事は、「絵師さんにもプログラミングしてもらいたい」と思って書きました。プログラミングって難しく聞こえるんですが
Scratchなら、誰でも簡単にプログラミングできるので
色んな人に自分のイラストを使ってもらえるようなプロジェクトを作ってもらいたいなと思います。
この記事がよかった!という方は「B!」ボタンや
コメント