ドット絵イラスト制作ツールを自作しよう！クミタテ式プログラミングドリル(p5JavaScript / Processing)

2022年3月11日 11:28

- 自分が使いやすいドット絵ツールを目指す

今回作るのは、ドット絵制作ツールです。
作ったドット絵をpng画像として保存するのが今回のポイントです。
今後のゲーム制作に活かせる、使いやすいドット絵ツールを目指してみましょう。

デモアプリはこちらから。https://openprocessing.org/sketch/1509692

- クミタテ式プログラミングドリルとは？

クミタテ式は英語のコードを、日本語で書かれた図解（通称、図解くん）を使って解説し、プラモデルのように図解通りにコードを組み立てていきながら学習する、プログラミング教材です。プログラミング的思考を学ぶよりも、コードの書き方を優先的に学習することを目的としています。

- 動画を見ながら学習する

動画と並行しながら学習するとより効率的に学習できるようになっています。たくさんのゲームジャンルのプログラミング方法をお伝えしているのでチャンネル登録もよろしくお願いします。

- 開発環境

OpenProcessingを使ったp5js、Processingを環境を前提としています。

- ハートを押す

この記事にいいね（ハート）をお願いします。
押すと何か良いことが起きます。

■[ここからスタート！]画面のサイズを決める

画面サイズを500x500の固定サイズにしましょう。

■背景を塗りつぶし続ける

drawの中で背景を塗りつぶし続けましょう。

■四角形のマスを、とりあえず1つ表示する

画面の左上に50サイズの四角形を1つ表示します。

■マスを100個、とりえあず同じ場所に重ねて表示する

forを使い、100回の繰り返し処理の中で四角形を表示しましょう。
とりあえず同じ場所に重ねて表示しますので、見た目上は1つの四角形に見えると思います。

■100個のマスを分離して10x10に綺麗に並べる

繰り返し処理の中で増え続ける変数「i」を利用して、四角形の座標を少しずつ分離して表示します。

■マスの情報を管理する配列を用意する

今のままではマスはただの四角形に過ぎません。
これらのマスに情報を与えるための10x10の配列を用意します。
サンプル配列は以下をお使いください。

// p5.js
let slotList = [
  0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 
  0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 
  1, 0, 1, 1, 1, 1, 1, 1, 0, 1, 
  0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 
  0, 1, 1, 0, 1, 1, 0, 1, 1, 0, 
  0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 
  1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 
  1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 
  0, 1, 0, 1, 0, 0, 1, 0, 1, 0, 
  1, 1, 0, 1, 0, 0, 1, 0, 1, 1, 
];

// Processing(Java)
int[] slotList = new int[]{
  0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 
  0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 
  1, 0, 1, 1, 1, 1, 1, 1, 0, 1, 
  0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 
  0, 1, 1, 0, 1, 1, 0, 1, 1, 0, 
  0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 
  1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 
  1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 
  0, 1, 0, 1, 0, 0, 1, 0, 1, 0, 
  1, 1, 0, 1, 0, 0, 1, 0, 1, 1, 
};

■配列の情報をもとにマスの色を黄色にする

10x10のマスと、10x10の配列を紐づけて表示に利用します。
配列の情報が1ならば黄色にしていきます。

■クリックされたマスにドットを打って黄色にする

クリックされたマスを座標から特定し、配列の情報を1に差し替えます。

■もう一度クリックでドットを解除できるようにする

黄色いマスをクリックしたら、白色に戻るようにします。

■作成したドット絵をpng画像で保存する

エンターキーで、作ったドット絵を画像として保存できるようにします。
save命令を使うことで現在の画面の状態をキャプチャして、画像として保存されます。

保存された画像は、p5.jsであればダウンロードフォルダに、Processing JavaであればSketchフォルダに保存されます。(Processing Javaの場合は、一度コード自体を保存してSketchフォルダを作っておきましょう）

クミタテ式の設計図はここまでです。
以下の応用課題は自分で考えてプログラミングしてみましょう。

課題1. ファイル名をつけて画像を保存しよう

save命令では、デフォルト名で画像保存されますが、save命令の第一引数にファイル名を指定することができます。

課題2. 枠線を無くそう

ドットごとに枠線がついてしまっているので、保存した画像はあまり綺麗ではありません。noStrokeを使って枠線がつかないようにしましょう。

課題3. 背景を透過しよう

保存したドット絵は背景に色がついてしまっています。背景を透過できるようにしましょう。

[p5.jsの場合]

clear命令とnoFill命令を利用して背景を透過しましょう。
backgroundは背景を塗りつぶすのに対し、clearは背景をまるっと消去して透過します。
参考：https://p5js.org/reference/#/p5/clear

[Processing Javaの場合]

Processing Javaだとclear命令で背景の透過ができず、ただただ真っ黒な背景になってしまうようです。
そこで、特殊な処理として、白背景の画像を作り、白色の部分を透過させる画像処理をした上で保存させます。難易度が高いので白色の部分を透過させて画像保存する関数を用意しました。

void saveForJava(){
  // 真っ白な空の画像を作る
  PImage img = createImage(width, height, ARGB);
  // drawが描いている状態を読み込む
  loadPixels();
  // drawが描いている状態をからの画像に読み込ませる
  img.pixels = pixels;
  img.updatePixels();

  // 透過したい、白い部分を総当たりで調べる
  for (int y=0; y<img.height; y++) {
    for (int x=0; x<img.width; x++) {
      color c = img.pixels[y*img.width+x];
      if(red(c) == 255 && green(c) == 255 && blue(c) == 255){
         // 透過の白に置き換える
         img.pixels[y*img.width+x] = color(255, 255, 255, 0);
      }
    }
  }

  // 保存用の画像をアップデートし、output.pngの名前で保存する
  img.updatePixels();
  img.save("output.png");
}

課題4. ドット絵画像をつなげてアニメーションさせてみよう

別のSketchを作り、吐き出した複数枚の画像を使ったアニメーションさせてみましょう。

以下はサンプルコードです。

let images = [];
function setup() {
  createCanvas(600, 400);
  images[0] = loadImage("data/MyWork-00.png");
  images[1] = loadImage("data/MyWork-01.png");
}

function draw() {
  background(255);
  let x = mouseX;
  let y = mouseY;
  let size = 50;
  let index = int(frameCount / 30) % 2;
  image(images[index], x, y, size, size);
}

課題5. 自分が使いやすいようにカスタマイズしていこう

ドット数を20に増やしたり、ドット色を複数色にしたり、など自分好みにカスタマイズしていこう。

（有料）完成コード

ここから先は

1,252字

¥ 100

ログイン

この記事が気に入ったらチップで応援してみませんか？