投稿

3月, 2017の投稿を表示しています

8x9Craftでのお絵かき方法

イメージ
このブログでは、FaceBookではちょっと見ずらいな~とか、ニンジャのみんなにしっておいてほしいな~というような情報を主にご連絡していきます。

早速ですが、初回の今回はタイトルにあるように、先日ドージョーで紹介したコノ動画



マインクラフトで「はっくん」というヤドカリのタートルをプログラミングで操作できるMod【8x9Craft(ハッククラフト)】で作成したお絵かきの方法を、具体的にご紹介します。

1.画像を処理する まずはじめにお絵かきしたい画像を用意します。今回はドージョーのアイコンを使用することにしました。

ただこの画像もともとはPNGとなっております。また、サイズも大きいのでこのままではとてもブロックで書ききれません。そこでこの画像を任意の画像編集ソフトでBMPの縦横124ピクセルに変換します。
ちなみに僕は、昔から使っているPhotoFilterを使いました。
でもこれだけだと上の画像のように、境界線の部分に中間色が出てしまいます。これを修正するには、フォトレタッチソフトでバケツマークの色の流し込みを、許容値を大きくして実施します。

流し込みを実施しても中間色が消えないところは、適時1ピクセルずつ塗りつぶして上の画像のように境界をはっきりさせます。ここまでで画像自体の処理はおしまい

2.画像をテキストデータにする さあこれで元ネタの画像はできました。これをプログラムで読めるようにするには?BMP画像のフォーマット解析?いやめんどうだな・・・なんかいい方法ないかなGoogle先生。すると先生がこんな回答をくれました。
bmp2csv BMP画像をCSVにコンバートしてくれるソフトです。
早速ダウンロードして実行です。


実行すると下のような画面が出るので、


「RGBをHEX形式で一つのファイルに保存する」を選択拡張子を「.CSV(カンマ区切り)」を選択
として保存します。

すると、以下のようなCSVファイルが出来上がります。

ちょっとちいさいのでわかりずらいかもしれませんが、1ピクセル毎のカラーコードがCSVで取得できました。
このままHEXのカラーコードを使ってもよかったんですが、わかりやすくするために、白(#FFFFFF)は0に、黒(#000000)は1に、のように単純な数値に置き換えをしました。
このCSVをJavaScriptの配列形式に整えてブロックの…