今回つくるもの
難易度
今回はスクラッチでドット絵キャラやドット絵の背景を作っていきます。マインクラフトやマリオのようなゲームを作る場合、あえてドット絵にする方が雰囲気が出ます。今回は、ドット絵でできた地面の上をドット絵でできたネコが歩き回るというプログラムを組んでいきます。
ドット絵を作る
まず、ネコと地面のドット絵を作っていきます。
ネコのドット絵
ネコのドット絵から作っていきますが、スクラッチからネコのイラストをダウンロードしましょう。
新しいプロジェクトを作り、ネコのコスチュームに移動してください。コスチュームの左下にある「ビットマップに変換」のボタンを押して画像を変換します。(ベクターの状態だとダウンロードしたときの拡張子が.heicになってしまうためです)
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/01/スクリーンショット-2021-12-16-11.58.29.png?resize=944%2C815&ssl=1)
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/01/スクリーンショット-2021-12-16-11.58.37.png?resize=944%2C815&ssl=1)
次に、左にあるコスチュームのアイコンを右クリックして、「書き出し」を選択し、名前をつけて書き出し、デスクトップなど好きな場所に保存します。
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/01/スクリーンショット-2021-12-16-11.58.45.png?resize=944%2C815&ssl=1)
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/01/スクリーンショット-2021-12-16-13.36.47.png?resize=298%2C280&ssl=1)
この画像をドット絵に変換していきます。「ドット絵 変換」と検索するといろいろなサイトが出てきますが、ここでは以下のサイトを活用させていただきました。
こちらにアクセスすると、以下のようなサイトが立ち上がりますので、新規ボタンを押してください。
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/12/スクリーンショット-2021-12-16-12.01.12-1024x601.png?resize=493%2C289&ssl=1)
そうすると、サイズの設定画面になるので、一旦16×16で設定しましょう。(ちなみに初期マリオは16×16でした。)
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/01/スクリーンショット-2021-12-16-12.02.07.png?resize=991%2C643&ssl=1)
すると以下のような画面になるので、左下にある画像読み込みを押して、先ほど保存したファイルを選択します。
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/01/スクリーンショット-2021-12-16-12.02.40.png?resize=991%2C643&ssl=1)
そうすると以下のように色数を指定する画面になります。今回は256色のままでいきます。
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/01/スクリーンショット-2021-12-16-12.03.05.png?resize=991%2C643&ssl=1)
OKを押すと以下のようにドット絵ができます。それっぽくはなりましたが、あまりネコには見えませんね・・。少ないドットでキャラクターに見えるようにするのがドット絵職人ですが、それがかなりの高等技術であるかがわかります。
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/01/スクリーンショット-2021-12-16-12.03.53.png?resize=991%2C643&ssl=1)
もう少し、ネコに見えるようにドット数を増やしていきます。新規ボタンを押して、次は32×32で同様にドット絵を作ってみましょう。そうすると以下のようなドット絵ができて、これであればかなりネコに見えますね。
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/01/スクリーンショット-2021-12-16-12.18.22.png?resize=992%2C645&ssl=1)
ドットが少ないほどレトロ感が出てかわいいので、ドットの粗さや色の数を自分なりに調整して好きなキャラクターを作ってみてください。
気に入ったキャラクターができたら下部分にあるPINGで書き出しを選択し、デスクトップなどの保存します。
地面のドット絵
次に地面のドット絵を作っていきます。
地面は正方形のドット絵(ブロック)を横に並べて地面にしていきます。マインクラフトでも草ブロックや石ブロック、土ブロックなどをならべて地面を作っています。
ドット絵を描くツールを使って、描いていくのもいいですが、かなりの労力になりますので、今回は写真からドット絵を作っていきます。
まずは、スマホなどで、ブロックになりそうな素材を撮影します。正方形のブロックを作りたいので、撮影の時はスクエアモードを使います。
地面っぽいブロックを作りたかったので、以下のような写真を撮影してみました。(庭の雑草です)
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/12/地面-1024x1024.jpg?resize=145%2C145&ssl=1)
そして、この画像をパソコンに取り込み、先ほどのサイトでドット絵に変換していきます。
サイズを16×16にして、色数を8に設定します。すると以下のようなドット絵ができました。写真は適当に撮影しましたがかなりそれっぽいブロックになりました。
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/01/スクリーンショット-2021-12-16-14.47.51.png?resize=989%2C644&ssl=1)
他にもいろいろなものを撮影してドット絵にすると以下のようになります。
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/01/スクリーンショット-2021-12-16-14.58.39.png?resize=787%2C388&ssl=1)
プログラムする
ではここから実際にプログラミングしていきます。
コスチュームをアップロードする
まずスクラッチで新規プロジェクトの作成を行い、ネコのコスチュームに移動してコスチュームのアップロードを選択します。
先ほど作成したネコのドット絵をアップロードして、もともとあったネコのコスチュームは削除します。
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/12/スクリーンショット-2021-12-16-15.01.54-1-1024x637.png?resize=589%2C366&ssl=1)
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/12/スクリーンショット-2021-12-16-15.02.26-1024x637.png?resize=588%2C365&ssl=1)
次に、右下のネコマークから、スプライトの追加を行い、「描く」を選択します。先ほど同様、コスチュームのアップロードで、地面のドット絵を選択します。
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/01/スクリーンショット-2021-12-16-15.02.45.png?resize=495%2C441&ssl=1)
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/01/スクリーンショット-2021-12-16-15.03.13.png?resize=946%2C816&ssl=1)
これで、スプライトの準備は完了です
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/12/スクリーンショット-2021-12-16-15.10.06-1024x604.png?resize=633%2C373&ssl=1)
コードを書く
次にコードを書いていきます。以下のように書いてください
まずはネコです。ずっと左右に壁を折り返しながら進みます。
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/01/スクリーンショット-2021-12-16-15.12.06.png?resize=591%2C380&ssl=1)
続いて地面です。地面はクローンを使って15個左下から右下まで並べていきます。
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/01/スクリーンショット-2021-12-16-15.12.28.png?resize=591%2C493&ssl=1)
クローンの並べ方については以下の記事も参考にしてみてください。
これで、緑の旗を押してみてください。
以下のように動けば成功です。ドット絵のレトロゲームっぽくなりましたね。
すべてのプログラムは以下を確認してください。地面以外のドット絵も入っていますので自由に活用ください。