はじめに
スクラッチでプログラミングをはじめるとき、まずはネコのキャラクターを動かすことからはじめて、その後も、スクラッチで用意されているキャラクターを使ってプログラムを学習する人がほとんどだと思います。もちろん、用意されたキャラクターで十分に学習はできますが、楽しんで学習したい人は是非、自分だけのキャラクターを作ってみてください。自分のキャラクターでゲームを作ると、例えばもぐらたたきのような単純なゲームでも自分だけのオリジナルゲームになり楽しさが倍増します。
このブログでは色々なゲームの作り方を紹介していますがすべて”ビンゴおじさん”というキャラクターを設定しています。下のように、”もぐらたたき”、”シューティング”、”ブロック崩し”などをビンゴおじさんのキャラクターで作っています。
これらのゲームの作り方も記事にしていますので参考にしてください。
スクラッチでもぐらたたきゲームの作り方
スクラッチでシューティングゲームの作り方
スクラッチでブロック崩しゲームの作り方
今回の記事では、コスチュームエディターの使い方を学習します。”ビンゴおじさん”キャラクターの作り方を例にとりますが、是非自分だけのキャラクターを作ってみてください。
新しいコスチュームの作り方
新しいプロジェクトを作ると下のような画面になり、はじめからネコのキャラクターがいる状態になります。ネコのスプライトの右上の×ボタンを押して、ネコを削除しましょう。
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/07/スクリーンショット-2021-07-17-16.10.35-1024x517.png?resize=1024%2C517&ssl=1)
そして右下のネコのアイコンをクリックし、下から2番目の”描く”を選択します。
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/07/スクリーンショット-2021-07-17-16.11.48.png?resize=493%2C270&ssl=1)
そうすると、白紙のコスチュームが出てきますので、ここに自分の好きなキャラクターを描いていきます。
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/07/スクリーンショット-2021-07-17-16.12.08-1024x518.png?resize=1024%2C518&ssl=1)
キャラクターを描こう
ここからはビンゴおじさんを描いていきます。これを練習するとキャラクターの描き方がだいたいわかるようになります。
まずビンゴおじさんのかぶり物は円ですので、まずは”円を描く”ツールでかぶり物を描いていきます。どこかをクリックして右下にぎゅーっとひっぱってくると円がかけます。絵を描くときはなるべく大きく描くようにしましょう。実際にゲームなどで使う時に縮小すれば大丈夫うですので。
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/07/スクリーンショット-2021-07-17-16.13.30.png?resize=780%2C593&ssl=1)
次に円の色を変えていきます。色を変えるのは”塗りつぶし”と書いてあるツールをクリックします。
”色”、”鮮やかさ”、”明るさ”の3つがありますが、まずはすべて100にして、そこから色を調整していくのがオススメです。
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/07/スクリーンショット-2021-07-17-16.14.45.png?resize=810%2C605&ssl=1)
ビンゴおじさんのかぶり物は白色です。”鮮やかさ”を0にすると白色になります。
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/07/スクリーンショット-2021-07-18-19.19.36-1.png?resize=818%2C593&ssl=1)
次に少し立体的に見せるようにグラデーションを入れていきます。好きなグラデーションパターンを選択して、もう1色選びます。今回はうっすらとしたグレーを選択しています。グラデーションを入れることで、キャラクターが立体的に見えてきます。
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/07/スクリーンショット-2021-07-18-19.21.52.png?resize=818%2C593&ssl=1)
次に輪郭を描いていきます。円を描くツールをつかって今度はすこし縦長の楕円を書きます。色も肌色に調整しましょう。
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/07/スクリーンショット-2021-07-17-16.19.26.png?resize=810%2C605&ssl=1)
輪郭ができたら、次は顔のパーツです。まゆげから描いていきます。
まゆげを描くには、まず、四角のツールを使って、長方形を描きます。
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/07/スクリーンショット-2021-07-17-16.22.19.png?resize=810%2C605&ssl=1)
次にまゆげの色は黒色なので、塗りつぶしを黒にし、周りの枠線は不要なので削除します。
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/07/スクリーンショット-2021-07-17-16.22.32.png?resize=810%2C605&ssl=1)
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/07/スクリーンショット-2021-07-17-16.22.41.png?resize=810%2C605&ssl=1)
これではまゆげっぽくないので、この長方形を変形させていきます。変形させるには、変形ツールを使います。変形ツールはポイントを動かしたり・追加していくことで自由に形を変えることができるものです。最初は扱い方が難しいですがいろいろ触ってみて慣れましょう。
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/07/スクリーンショット-2021-07-17-16.25.05.png?resize=810%2C605&ssl=1)
まゆげができたら次に目を描いていきます。目は、まず楕円を描いて、まゆげと同様に変形ツールを使って形を作っていきます。さらに、白目の中に黒目を描いて目が完成です。
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/07/スクリーンショット-2021-07-17-16.29.30.png?resize=810%2C605&ssl=1)
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/07/スクリーンショット-2021-07-17-16.30.16.png?resize=810%2C605&ssl=1)
これで右目が完成です。左目は右目を左右反転させて作っていきます。まず右の眉毛と目をシフトボタンを押しながら選択し、グループ化します。
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/07/スクリーンショット-2021-07-17-16.30.48.png?resize=810%2C605&ssl=1)
次にグループ化した右目と右眉毛をコピして貼り付けます。
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/07/スクリーンショット-2021-07-17-16.31.06.png?resize=810%2C605&ssl=1)
これを左右反転ツールを使い反転させ、左目の位置にあわせます。
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/07/スクリーンショット-2021-07-17-16.31.12.png?resize=810%2C605&ssl=1)
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/07/スクリーンショット-2021-07-17-16.31.42.png?resize=810%2C605&ssl=1)
次に鼻を描いていきます。目と同様に、楕円を変形させて、鼻の形を作っていきます。
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/07/スクリーンショット-2021-07-17-16.33.06-1.png?resize=810%2C605&ssl=1)
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/07/スクリーンショット-2021-07-17-16.35.04.png?resize=810%2C605&ssl=1)
ここで鼻の上部が一つづきになっていると鼻っぽくないので、消しゴムツールで消していきます。
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/07/スクリーンショット-2021-07-17-16.36.07.png?resize=810%2C605&ssl=1)
同じように、口も楕円から作っていきます。口の真ん中の線は直線を少し曲げて描いています。
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/07/スクリーンショット-2021-07-17-16.38.03.png?resize=810%2C605&ssl=1)
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/07/スクリーンショット-2021-07-17-16.50.45.png?resize=810%2C605&ssl=1)
さらに、よりクオリティーを上げるために、かぶり物にテカリを入れていきます。テカリは楕円を変形させて作ります。果物などを描くときも、その果物の色より少し薄い色でテカリを入れることで立体的に見えてきます。
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/07/スクリーンショット-2021-07-17-16.55.57.png?resize=810%2C605&ssl=1)
最後にフリーハンドツールで”ビンゴ”と書いて完成です。
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/07/スクリーンショット-2021-07-17-16.57.44.png?resize=810%2C605&ssl=1)
歩くキャラクターを作ろう
ゲームを作る場合、横向きに歩くキャラクターを使うことが多いので、ビンゴおじさんも、体をつけて歩かせるようにします。
体をつくるのが難しい場合、体だけはすでに用意してあるキャラクターのものを借りてくるのも一つの手段です。今回は“PicoWaking”というキャラクターの体を使います。右下のネコのマークから”スプライトを選ぶ”を選択し、“PicoWaking”を選択します。
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/07/スクリーンショット-2021-07-17-17.00.07-1.png?resize=414%2C273&ssl=1)
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/07/スクリーンショット-2021-07-18-21.45.47-1024x516.png?resize=1024%2C516&ssl=1)
このようなキャラクターが表示されます。4つのコスチュームがあり、顔は一緒で体の動きが4つあります。これらのコスチュームを順番に表示することで歩いているように見えます。
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/07/スクリーンショット-2021-07-17-17.01.00.png?resize=942%2C730&ssl=1)
このキャラクターの顔をビンゴおじさんに変えていくので、顔を選択して削除します。
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/07/スクリーンショット-2021-07-17-17.01.35.png?resize=791%2C603&ssl=1)
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/07/スクリーンショット-2021-07-17-17.01.40.png?resize=791%2C603&ssl=1)
ビンゴおじさんのスプライトに戻り、顔をコピーして、オレンジの体の上に貼り付けます。
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/07/スクリーンショット-2021-07-17-17.01.59.png?resize=791%2C603&ssl=1)
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/07/スクリーンショット-2021-07-17-17.04.56.png?resize=791%2C603&ssl=1)
次に、体の色を白に塗りつぶしていきます。塗りつぶしツールを使って、オレンジ色の部分をすべて白色に塗り替えてください。
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/07/スクリーンショット-2021-07-17-17.05.13.png?resize=791%2C603&ssl=1)
このままでは振り返っているように見えるので、右を向いているように顔を変えていきます。
輪郭を全体的に右にもってきて、顔のパーツを右に寄せていくことで右を向いているように見えます。
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/07/スクリーンショット-2021-07-17-17.06.53.png?resize=791%2C603&ssl=1)
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/07/スクリーンショット-2021-07-17-17.10.05.png?resize=791%2C603&ssl=1)
ここまでできたら、右向きの顔をコピーして、他の体(コスチューム2〜4)にも貼り付けていきます。
体を白く塗りつぶすのも忘れないようにしましょう。
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/07/スクリーンショット-2021-07-17-17.10.26.png?resize=791%2C603&ssl=1)
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/07/スクリーンショット-2021-07-18-22.08.33.png?resize=402%2C277&ssl=1)
キャラクターを動かしてみよう
最後につくったビンゴおじさんを動かしてみましょう。
正面の顔のおじさんと、横向きの歩くおじさんの2種類のスプライトができているので、正面の顔のおじさんを非表示にします。
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/07/スクリーンショット-2021-07-18-22.10.58.png?resize=413%2C272&ssl=1)
そして、横向きの歩くおじさんに次のコードを書きます。
0.2秒ごとに次のコスチュームに行くことで、歩いているように見えます。
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/07/スクリーンショット-2021-07-17-17.16.25-1024x520.png?resize=1024%2C520&ssl=1)
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/07/スクリーンショット-2021-07-17-17.16.35.png?resize=436%2C218&ssl=1)
以下の動画のようになれば成功です。これでいろいろなオリジナルゲームを作れるようになります。
ここまでできれば、コスチュームエディターの使い方は大体マスターできたはずです。実際に自分のキャラクターを作ってみましょう。