スクラッチでドット絵キャラクターを動かそう

ゲーム作りのテクニック

今回つくるもの

難易度1 out of 5 stars

今回はスクラッチでドット絵キャラやドット絵の背景を作っていきます。マインクラフトやマリオのようなゲームを作る場合、あえてドット絵にする方が雰囲気が出ます。今回は、ドット絵でできた地面の上をドット絵でできたネコが歩き回るというプログラムを組んでいきます。

ドット絵を作る

まず、ネコと地面のドット絵を作っていきます。

ネコのドット絵

ネコのドット絵から作っていきますが、スクラッチからネコのイラストをダウンロードしましょう。

新しいプロジェクトを作り、ネコのコスチュームに移動してください。コスチュームの左下にある「ビットマップに変換」のボタンを押して画像を変換します。(ベクターの状態だとダウンロードしたときの拡張子が.heicになってしまうためです)

スクラッチでドット絵キャラクターを動かそう
スクラッチでドット絵キャラクターを動かそう

次に、左にあるコスチュームのアイコンを右クリックして、「書き出し」を選択し、名前をつけて書き出し、デスクトップなど好きな場所に保存します。

スクラッチでドット絵キャラクターを動かそう
スクラッチでドット絵キャラクターを動かそう

この画像をドット絵に変換していきます。「ドット絵 変換」と検索するといろいろなサイトが出てきますが、ここでは以下のサイトを活用させていただきました。

ミニドット絵メーカー3

こちらにアクセスすると、以下のようなサイトが立ち上がりますので、新規ボタンを押してください。

スクラッチでドット絵キャラクターを動かそう

そうすると、サイズの設定画面になるので、一旦16×16で設定しましょう。(ちなみに初期マリオは16×16でした。)

スクラッチでドット絵キャラクターを動かそう

すると以下のような画面になるので、左下にある画像読み込みを押して、先ほど保存したファイルを選択します。

スクラッチでドット絵キャラクターを動かそう

そうすると以下のように色数を指定する画面になります。今回は256色のままでいきます。

スクラッチでドット絵キャラクターを動かそう

OKを押すと以下のようにドット絵ができます。それっぽくはなりましたが、あまりネコには見えませんね・・。少ないドットでキャラクターに見えるようにするのがドット絵職人ですが、それがかなりの高等技術であるかがわかります。

スクラッチでドット絵キャラクターを動かそう

もう少し、ネコに見えるようにドット数を増やしていきます。新規ボタンを押して、次は32×32で同様にドット絵を作ってみましょう。そうすると以下のようなドット絵ができて、これであればかなりネコに見えますね。

スクラッチでドット絵キャラクターを動かそう

ドットが少ないほどレトロ感が出てかわいいので、ドットの粗さや色の数を自分なりに調整して好きなキャラクターを作ってみてください。

気に入ったキャラクターができたら下部分にあるPINGで書き出しを選択し、デスクトップなどの保存します。

地面のドット絵

次に地面のドット絵を作っていきます。
地面は正方形のドット絵(ブロック)を横に並べて地面にしていきます。マインクラフトでも草ブロックや石ブロック、土ブロックなどをならべて地面を作っています。

ドット絵を描くツールを使って、描いていくのもいいですが、かなりの労力になりますので、今回は写真からドット絵を作っていきます。

まずは、スマホなどで、ブロックになりそうな素材を撮影します。正方形のブロックを作りたいので、撮影の時はスクエアモードを使います。

地面っぽいブロックを作りたかったので、以下のような写真を撮影してみました。(庭の雑草です)

スクラッチでドット絵キャラクターを動かそう

そして、この画像をパソコンに取り込み、先ほどのサイトでドット絵に変換していきます。
サイズを16×16にして、色数を8に設定します。すると以下のようなドット絵ができました。写真は適当に撮影しましたがかなりそれっぽいブロックになりました。

スクラッチでドット絵キャラクターを動かそう

他にもいろいろなものを撮影してドット絵にすると以下のようになります。

スクラッチでドット絵キャラクターを動かそう

プログラムする

ではここから実際にプログラミングしていきます。

コスチュームをアップロードする

まずスクラッチで新規プロジェクトの作成を行い、ネコのコスチュームに移動してコスチュームのアップロードを選択します。

先ほど作成したネコのドット絵をアップロードして、もともとあったネコのコスチュームは削除します。

スクラッチでドット絵キャラクターを動かそう
スクラッチでドット絵キャラクターを動かそう

次に、右下のネコマークから、スプライトの追加を行い、「描く」を選択します。先ほど同様、コスチュームのアップロードで、地面のドット絵を選択します。

スクラッチでドット絵キャラクターを動かそう
スクラッチでドット絵キャラクターを動かそう

これで、スプライトの準備は完了です

スクラッチでドット絵キャラクターを動かそう

コードを書く

次にコードを書いていきます。以下のように書いてください

まずはネコです。ずっと左右に壁を折り返しながら進みます。

スクラッチでドット絵キャラクターを動かそう

続いて地面です。地面はクローンを使って15個左下から右下まで並べていきます。

スクラッチでドット絵キャラクターを動かそう

クローンの並べ方については以下の記事も参考にしてみてください。

これで、緑の旗を押してみてください。

以下のように動けば成功です。ドット絵のレトロゲームっぽくなりましたね。

すべてのプログラムは以下を確認してください。地面以外のドット絵も入っていますので自由に活用ください。

ドット絵を使ったゲームの基礎