提供：Japanese Scratch-Wiki
|
この記事は2019年8月の注目の記事です。 |
ドット絵エディタを作ることは、Scratchにおいて様々な人が行ってきた行為であり、それぞれに差異が存在する。本稿においては、このうち基本的なものを紹介していく。
ドット絵エディタとは
文字通り、ドット絵を描くためのエディタのことである。「ドット絵製造機」「ドット絵メーカー」「ドットエディター」など様々な呼称が存在するが、本稿では「ドット絵エディタ」で統一する。
Scratchの検索フォームで「dot」や「ドット絵」などのワードで検索すればわかるように、ドット絵エディタは今までたくさんの人々に作られ洗練されてきた、一つのジャンルと呼ぶことができ、2019年には、fumaki氏の48色ドット絵エディター(225ドット) スマホ対応が注目のプロジェクトに選ばれた。
ドット絵エディタの種類
ドット絵エディタには、処理方式において二つの種類が存在する。クローンを使う方式と、ペンブロックを使う方式である。この章では、この二つの特徴について解説していく。
- クローンを使う方式:処理開始時にドットの形状をしたクローンを大量生成して、それらに番号を振ったうえで並べてパレットを作る。
利点:それぞれのクローンが独立して処理を行っているため、マウスの操作をほぼ完全に拾い上げられることなど。 欠点:スプライト内の処理を複雑にしすぎると重くなること、クローンの上限の関係上パレットを300ドット程度にしかできないことなど。
- ペンを使う方式:ペンで塗りつぶされた四角形を大量に描画し[1]、それをドットとして扱う方式。
利点:処理速度が安定していること、再描画せずに実行することで高速で描画できることなど。 欠点:クローンと比較して多少難解であることなど。
実際に作成する:描画編
今回は、ペンブロックを使う方式で、1ドットが20×20、マス目が16×16のドット絵エディタを作る。 これから記述する定義を実際に作る場合は、特に注記がない場合必ず「再描画せずに実行する」のチェックボックスにチェックを入れること。
マス目を描くプログラム
ほとんどのドット絵エディタにはマス目が存在し、これによって平面図形内の位置を把握することが容易になる。また、プログラム作成中においても、マス目によってドットを描画するべき場所がより分かりやすくなる。よって、まずはマス目を描くブログラムを記載する。
定義 マス目を描く x座標を(-160)、y座標を(160)にする ペンの太さを(1)にする ペンの色を(#111111)にする (17)回繰り返す ペンを下ろす y座標を(-320)ずつ変える y座標を(320)ずつ変える ペンを上げる x座標を(20)ずつ変える end x座標を(-160)、y座標を(160)にする (17)回繰り返す ペンを下ろす x座標を(320)ずつ変える x座標を(-320)ずつ変える ペンを上げる y座標を(-20)ずつ変える end
マス目を塗りつぶすプログラム
次に、マス目を塗りつぶすプログラムを記載する。
定義 上から(上)マス目、左から(左)マス目を(色)色で塗りつぶす もし<((上)+(0))=(上)>なら//引数「上」が数字かどうかを判定している。 x座標を(((左)*(20))-(180))、y座標を((180)-((上)*(20)))にする//理由は後述するが、このプログラムではy座標は上から数える。 ペンの色を(色)にする ペンの太さを(1)にする (10)回繰り返す ペンを下ろす x座標を(20)ずつ変える y座標を(-1)ずつ変える x座標を(-20)ずつ変える ペンを上げる y座標を(-1)ずつ変える end ペンを上げる end
これで、描画プラットフォームは完成である。
実際に作成する:文字列編集編
プログラムを記載する前に、このドット絵エディタの仕組みを説明する。
大半のドット絵エディタにおいては。リストに画像データを格納する方式を使っており、このドット絵エディタもその方式である。
まず、色に対応する数字を決める。[2]今回の数字割り当てを下記に記す。また、カラーコードはリスト「色」の対応した行数に格納されるものとする。
| 数字 | 色 | 16進数カラーコード |
|---|---|---|
| 1 | 赤 | FF0000 |
| 2 | 緑 | 00FF00 |
| 3 | 青 | 0000FF |
| 4 | 黄色 | FFFF00 |
| 5 | ピンク | FF00FF |
| 6 | 水色 | 00FFFF |
| 7 | 白 | FFFFFF |
| 8 | 黒 | 000000 |
| 9 | 透明(本稿では灰色で表現する) | なし(灰色は808080) |
これを踏まえて、例えばリストに下のような数字の羅列を格納する(改行した場合はリストの行を改めているとみなす)
999988889999
998811118899
981111111189
981111111189
817111111118
877771111178
877777777778
987787787789
998787787899
984877778489
874488884478
878444444878
878444444878
983888888389
983333333389
983338833389
981118811189
998889988899
これを色に当てはめると、下のようになる。
このように、ドット絵を数字の羅列として扱うことが可能なわけだ。[3]
ドット絵エディタにおいては、マウスの座標やクリック内容などからドット絵に加える変化を割り出し、その変化を数字の羅列に与え、その数字の羅列をドット絵として前述の描画アルゴリズムで書き出しているわけである。
では、それにあたってよく使用するプログラムを紹介する。
データのリセット
旗が押されるなど、リセットする必要が出た場合、リセットを行う。
定義 リセット [データ v]のすべてを削除する::list (16)回繰り返す [9999999999999999]を[データ v]に追加する end [今の色 v]を(1)にする//変数「今の色」には、リストの何番目の色を使用しているかを格納する。
データの編集
指定された行数の、指定された数文字目のデータを編集する。
定義 (行)行目の(文字目)文字目を(内容)にする もし<((行)+(0))=(行)>なら [カウンター v]を(0)にする [一時保存 v]を()にする ((文字目)-(1))回繰り返す [カウンター v]を(1)ずつ変える [一時保存 v]を((一時保存)と(([データ v]の(行)番目::list)の(カウンター)番目の文字::operators))にする end [一時保存 v]を((一時保存)と(内容))にする [カウンター v]を(1)ずつ変える ((16)-(文字目))回繰り返す [カウンター v]を(1)ずつ変える [一時保存 v]を((一時保存)と(([データ v]の(行)番目::list)の(カウンター)番目の文字::operators))にする end [リスト v]の(行)番目を(一時保存)で置き換える::list
実際に作成する:マウス観測編
ドット絵エディタは、使用者が操作を行うことでドット絵を作るものなので、マウスの操作を検知する必要がある。
マウスのマス目上の座標を特定する
マウスのマス目上のy座標は、処理のしやすさの関係上、Scratchにおける通常状態とは逆のである、上から下への方向で数える。
なお、このドット絵エディタのマス目においては、左端のx座標が-160、右端が160、上端のy座標が160、下端が-160であり、もしマウスがマス目の範囲外ならば「n」を返すようにしている。
定義 マウス座標をマス目座標に置き換える [マウスx v]を((((マウスのx座標)+(160))/(20))の(切り上げ v)::operators)にする [マウスy v]を(((((マウスのy座標)*(-1))+(160))/(20))の(切り上げ v)::operators)にする もし<<<(マウスのx座標) > (160)>または<(-160) > (マウスのx座標)>>または<<(マウスのy座標) > (160)>または<(-160) > (マウスのy座標)>>>なら [マウスx v]を(n)にする [マウスy v]を(n)にする
実際に作成する:UI編
エディタは人間が使うためにあるわけだから、UI(ユーザーインターフェース)を整備する必要がある。ここで紹介しているのはあくまで最低限のドット絵エディタでしかないので、より機能を増やす場合は、それに対応したボタンなりを付属させることが必要である。ひとまずここでは、色を変えるボタンについて考えよう。
今回は簡単に、ペンでボタンを描画するの記事にあるボタンの簡易版をつくり、押されるたびに変数「今の色」を1増やし、10になった場合は1に戻すようにしよう。
定義 色切り替え用ボタン x座標を(190)、y座標を(-190)にする//マス目の範囲外。 ペンの太さを(50)にする もし<<マウスが押された>ではない>なら [ボタンフラグ v]を(n)にする end もし<<<マウスが押された>かつ<((マウスのポインター v)までの距離) < (50)>>かつ<(ボタンフラグ)=[n]>>なら [今の色 v]を(1)ずつ変える もし<(今の色)=(10)>なら [今の色 v]を(1)にする end [ボタンフラグ v]を[y]にする end ペンの色を([0x]と([色 v]の(今の色)番目::list))にする ペンを下ろす ペンを上げる
実際に作成する:合体編
ここまで作成してきた定義をすべて合体する。
@greenFlag がクリックされたとき::events hat リセット::custom マス目::custom ずっと 色切り替え用ボタン::custom もし<マウスが押された>なら マウス座標をマス目座標に置き換える::custom (マウスy)行目の(マウスx)文字目を(今の色)にする::custom 上から(マウスy)マス目、左から(マウスx)マス目を([色 v]の(今の色)番目::list)で塗りつぶす::custom マス目を描く::custom end end
実際に作成する:応用編
合体編では、リストに格納したデータが有効に利用されていない。ドット絵エディタの機能を増やすにあたって使用するものだからである。そのため、実際に一つ機能を追加してみよう。
ここでは、SVGファイルという、Scratchのスプライトのコスチュームにも使える画像ファイルを出力するプログラムを作る。ここで変数「SVG出力」に出力された文字列をなんらかのテキストエディタに貼り付けたうえで拡張子を「svg」にすると、実際の画像として使える。
先にショートカット用の定義を紹介する。
定義 追加 (1)(2)(3)(4)(5)(6) [SVG出力 v]を(((((SVG出力)と(1::custom-arg))と((2::custom-arg)と(3::custom-arg)))と((4::custom-arg)と(5::custom-arg)))と(6::custom-arg))にする
定義 SVG変換 [SVG出力 v]を[<svg version="1.1" viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g>]にする [カウンターy v]を(0)にする (16)回繰り返す [カウンターy v]を(1)ずつ変える [カウンターx v]を(0)にする (16)回繰り返す [カウンターx v]を(1)ずつ変える もし<<(([データ v]の(カウンターy)番目::list)の(カウンターx)番目の文字::operators) = [9]>ではない>なら 追加 [<path d="M ](((カウンターx)*(10))-(10))( )((カウンターy)*(10))[ L ]((カウンターx)*(10))::custom//「L」に見えるのは正確には「 L 」、空白に見えるのも正確には「 」である。詳しくはソースを参照。 追加 ( )(((カウンターy)*(10))-(10))[ L ]((カウンターx)*(10))( )((カウンターy)*(10))::custom 追加 [ L ]((カウンターx)*(10))( )((カウンターy)*(10))[ L ][ Z " fill="#]::custom 追加 ([色 v]の(([データ v]の(カウンターy)番目::list)の(カウンターx)番目の文字::operators)番目::list)[" stroke-width="0"/>]()()()()::custom//ここの空白はただの空白である。 end end end [SVG出力 v]を((SVG出力)と[</g></svg>])にする
