はじめに
スクラッチでプログラミングをはじめるとき、まずはネコのキャラクターを動かすことからはじめて、その後も、スクラッチで用意されているキャラクターを使ってプログラムを学習する人がほとんどだと思います。もちろん、用意されたキャラクターで十分に学習はできますが、楽しんで学習したい人は是非、自分だけのキャラクターを作ってみてください。自分のキャラクターでゲームを作ると、例えばもぐらたたきのような単純なゲームでも自分だけのオリジナルゲームになり楽しさが倍増します。
このブログでは色々なゲームの作り方を紹介していますがすべて”ビンゴおじさん”というキャラクターを設定しています。下のように、”もぐらたたき”、”シューティング”、”ブロック崩し”などをビンゴおじさんのキャラクターで作っています。
これらのゲームの作り方も記事にしていますので参考にしてください。
スクラッチでもぐらたたきゲームの作り方
スクラッチでシューティングゲームの作り方
スクラッチでブロック崩しゲームの作り方
今回の記事では、コスチュームエディターの使い方を学習します。”ビンゴおじさん”キャラクターの作り方を例にとりますが、是非自分だけのキャラクターを作ってみてください。
新しいコスチュームの作り方
新しいプロジェクトを作ると下のような画面になり、はじめからネコのキャラクターがいる状態になります。ネコのスプライトの右上の×ボタンを押して、ネコを削除しましょう。
そして右下のネコのアイコンをクリックし、下から２番目の”描く”を選択します。
そうすると、白紙のコスチュームが出てきますので、ここに自分の好きなキャラクターを描いていきます。
キャラクターを描こう
ここからはビンゴおじさんを描いていきます。これを練習するとキャラクターの描き方がだいたいわかるようになります。
まずビンゴおじさんのかぶり物は円ですので、まずは”円を描く”ツールでかぶり物を描いていきます。どこかをクリックして右下にぎゅーっとひっぱってくると円がかけます。絵を描くときはなるべく大きく描くようにしましょう。実際にゲームなどで使う時に縮小すれば大丈夫うですので。
次に円の色を変えていきます。色を変えるのは”塗りつぶし”と書いてあるツールをクリックします。
”色”、”鮮やかさ”、”明るさ”の３つがありますが、まずはすべて１００にして、そこから色を調整していくのがオススメです。
ビンゴおじさんのかぶり物は白色です。”鮮やかさ”を０にすると白色になります。
次に少し立体的に見せるようにグラデーションを入れていきます。好きなグラデーションパターンを選択して、もう１色選びます。今回はうっすらとしたグレーを選択しています。グラデーションを入れることで、キャラクターが立体的に見えてきます。
次に輪郭を描いていきます。円を描くツールをつかって今度はすこし縦長の楕円を書きます。色も肌色に調整しましょう。
輪郭ができたら、次は顔のパーツです。まゆげから描いていきます。
まゆげを描くには、まず、四角のツールを使って、長方形を描きます。
次にまゆげの色は黒色なので、塗りつぶしを黒にし、周りの枠線は不要なので削除します。
これではまゆげっぽくないので、この長方形を変形させていきます。変形させるには、変形ツールを使います。変形ツールはポイントを動かしたり・追加していくことで自由に形を変えることができるものです。最初は扱い方が難しいですがいろいろ触ってみて慣れましょう。
まゆげができたら次に目を描いていきます。目は、まず楕円を描いて、まゆげと同様に変形ツールを使って形を作っていきます。さらに、白目の中に黒目を描いて目が完成です。
これで右目が完成です。左目は右目を左右反転させて作っていきます。まず右の眉毛と目をシフトボタンを押しながら選択し、グループ化します。
次にグループ化した右目と右眉毛をコピして貼り付けます。
これを左右反転ツールを使い反転させ、左目の位置にあわせます。
次に鼻を描いていきます。目と同様に、楕円を変形させて、鼻の形を作っていきます。
ここで鼻の上部が一つづきになっていると鼻っぽくないので、消しゴムツールで消していきます。
同じように、口も楕円から作っていきます。口の真ん中の線は直線を少し曲げて描いています。
さらに、よりクオリティーを上げるために、かぶり物にテカリを入れていきます。テカリは楕円を変形させて作ります。果物などを描くときも、その果物の色より少し薄い色でテカリを入れることで立体的に見えてきます。
最後にフリーハンドツールで”ビンゴ”と書いて完成です。
歩くキャラクターを作ろう
ゲームを作る場合、横向きに歩くキャラクターを使うことが多いので、ビンゴおじさんも、体をつけて歩かせるようにします。
体をつくるのが難しい場合、体だけはすでに用意してあるキャラクターのものを借りてくるのも一つの手段です。今回は“PicoWaking”というキャラクターの体を使います。右下のネコのマークから”スプライトを選ぶ”を選択し、“PicoWaking”を選択します。
このようなキャラクターが表示されます。４つのコスチュームがあり、顔は一緒で体の動きが４つあります。これらのコスチュームを順番に表示することで歩いているように見えます。
このキャラクターの顔をビンゴおじさんに変えていくので、顔を選択して削除します。
ビンゴおじさんのスプライトに戻り、顔をコピーして、オレンジの体の上に貼り付けます。
次に、体の色を白に塗りつぶしていきます。塗りつぶしツールを使って、オレンジ色の部分をすべて白色に塗り替えてください。
このままでは振り返っているように見えるので、右を向いているように顔を変えていきます。
輪郭を全体的に右にもってきて、顔のパーツを右に寄せていくことで右を向いているように見えます。
ここまでできたら、右向きの顔をコピーして、他の体（コスチューム２〜４）にも貼り付けていきます。
体を白く塗りつぶすのも忘れないようにしましょう。
キャラクターを動かしてみよう
最後につくったビンゴおじさんを動かしてみましょう。
正面の顔のおじさんと、横向きの歩くおじさんの２種類のスプライトができているので、正面の顔のおじさんを非表示にします。
そして、横向きの歩くおじさんに次のコードを書きます。
0.2秒ごとに次のコスチュームに行くことで、歩いているように見えます。
以下の動画のようになれば成功です。これでいろいろなオリジナルゲームを作れるようになります。
ここまでできれば、コスチュームエディターの使い方は大体マスターできたはずです。実際に自分のキャラクターを作ってみましょう。
