inosyanのブログ

プログラム、家庭菜園、僕が興味を持ったことを書いていきます

【マイクラMakeCode】MakeCodeのチュートリアルを見てみる その2

f:id:inosyan:20180929001747g:plain
(前回のチュートリアルで穴に落ちて出られなくなったキノコ模様の牛達)

前回の続きです。

プログラムブロック

 スクラッチに代表されるビジュアルプログラミング言語では、ジグソーパズルのピースのようなものをブロックと呼びますが、マインクラフトのゲーム内にも「ブロック」があり、それと紛らわしいので、ここでは「プログラムブロック」と呼ぶことにします。スクラッチをやったことがある人には馴染みのある画面ですね。

 スクラッチでは、「緑の旗」という、一番初めに実行するためのプログラムブロックがありましたね。MakeCode(メイクコード)にも同じ働きのブロックはありますが、MakeCodeの場合は、チャットで「checken」と入力されたときや、プレイヤーが歩いた時など、さまざまなきっかけをもとに実行させます。このきっかけのことを「イベント」と呼びます。

 プログラムブロックの上が平らなものがイベントです。イベントがきっかけで開始するので、その上にはまるプログラムブロックは無いからです。

f:id:inosyan:20180929001814g:plain

ChickenRain(チキンレイン)のコード

 チュートリアルの ChickenRainのコードを詳しくみてみましょう。
f:id:inosyan:20180929001828j:plain

①では、チャットコマンドで "chicken" と入力されるのを待っています。逆に言えば、チャットでそれが入力されるまでは何も起きません。他の文字がうたれても何も起きません。"chicken" と打たれた時だけ、この青色のブロックで囲まれている箇所が実行されます。

②では、囲まれた箇所を100回繰り返します。

③は、動物を、プレイヤーの頭上10メートルの箇所に出現させています。座標は、X、Y、Zの順番で、それがプレイヤーからの相対座標なのか、ワールドの絶対座標なのかを指定できます。
f:id:inosyan:20180929001902g:plain

 上記の③の例では、X, Z は0で、Yだけが10なので、プレイヤーの上方向10メートルの位置だということを示しています。

JavaScriptに切り替え

 画面の上にある、{} のボタンを押してみましょう。
f:id:inosyan:20180929001916g:plain

 プログラムブロックがJavaScriptに切り替わりました。プログラム初心者は戸惑うかもしれません。でもよく見ると、プログラムブロックとやっていることは同じです。 f:id:inosyan:20180929001928g:plain

 上記の①にあたるコードがこれです。

player.onChat("chicken", function () {

})

 これは player(プレイヤー) が onChat(チャットコマンド)で "chichen" と入力した時 function(){} のカッコの中を実行する という意味です。function は 関数 という意味で、プログラムの用語ですが、いまはあまり深く考えず、「実行したいものをまとめておく入れ物」くらいに考えておいて問題ないでしょう。

 次に、上記の②にあたるものがこれです。

    for (let i = 0; i < 100; i++) {

    }

 i(アイ) は「変数」と呼ばれるもので、変化する値を入れておく入れ物です。はじめに i を 0にして、それが 100 より小さいあいだ、iを1ずつ増やしていきながら {} の中を実行する という意味です。

 あることを繰り返し行う書き方はいくつかありますが、これは for(フォア)文と呼ばれるものです。変数の i は他の文字列でも良いですが、for文では i が変数としてよく使われます。

 変数の前に書いた let(レット) は、変化する値だということを表すための記号です。他にも const(コンスト) がありますが、const は変化しない値の時に使います。

 i++ の ++ は、i = i + 1 と書くこともできます。この式の意味は、iに1を足したものを再びiとする という意味で、iが一つずつ増えていきます。このことをインクリメントと言います。

 最後に、上記の③にあたるものがこれです。

        mobs.spawn(mobs.animal(AnimalMob.MushroomCow), positions.create(0, 10, 0))

 「mobs(モブ1)を spawn(発生)させよ。種類は AnimalMob.MushroomCow(キノコ模様の牛)、位置はプレイヤーからの相対位置(x:0, y:10, z:0)」
という意味です。

 丸暗記する必要はないですよ。他のプログラム開発用のツールと同じように、MakeCodeにも「コード補完」という便利な機能がついています。文字を途中まで打ったらあとは候補がでてくるのでそこから選ぶだけです。

f:id:inosyan:20180929002013g:plain

 いかがでしょう。英単語が少しわかれば、プログラムなんて簡単な気がしませんか?


  1. mob(モブ)とは、群衆のことを意味する言葉だが、マインクラフトでは動物やモンスターのことを指す

【マイクラMakeCode】MakeCodeのチュートリアルを見てみる その1

f:id:inosyan:20180925224438j:plain

 Windows10のパソコンにマインクラフトとCodeConnection(コードコネクション)をインストールしたら、いよいよMakeCode(メイクコード)でプログラムができます。 でも、どうやって書き始めたらいいのかわからないかもしれません。まずはMakeCodeで何ができるのかを知るために、チュートリアルを見てみましょう。

MakeCodeの画面

 マインクラフトにCodeConnectionのアドレスを入力し接続されると、CodeConnectionの画面がMakeCodeになり、ウィンドウサイズが画面の半分の大きさになっています。これはおそらく画面の半分にMakeCodeを、もう半分にマインクラフトを置いて作業することを想定してるからですが、ウィンドウの大きさを変えても問題ありません。

f:id:inosyan:20180925224525j:plain

①: 自分のプロジェクト一覧
②: チュートリアル一覧

 チュートリアルは画面に収まりきれないほどたくさんあります。Tutorialsの行の右端のボタンを押せばもっとたくさん見れます。
f:id:inosyan:20180925224548j:plain

  • Chicken Rain: 空からにわとりを降らせる
  • Agent Moves: エージェントをプレイヤーの場所にワープさせ、前後左右に歩かせる
  • Agent Build: エージェントが歩きながらブロックを置く
  • Mega Jump: プレイヤーを上空にワープさせる
  • Flower Trail: プレイヤーの歩いた場所に花を咲かせる
  • Super Digger: 地面に大きな穴を掘る
  • Fast Forward: 時間を進めて昼と夜をすばやく変える
  • Billboard: ブロックで巨大な文字を書く
  • Compass Rose: 大きな文字で、E(西)、W(東)、N(北)、S(南)を書く
  • Spleef: プレイヤー同士が戦うための競技場(マイクラではスプリーフと言う)を作る
  • Leap of faith: 1x1マスの水たまりと、すごく高い飛び込み台を作る
  • Gold Stairs: 金色の階段を作る
  • Lava Tower: 溶岩の塔を作る
  • Sand Storm: 空から砂を降らせる

Chicken Rain(チキンレイン)

 チュートリアルの一つ、チキンレインを見てみましょう。サムネイルをクリックすると、「Start Tutorial」のボタンが出てくるので、それを押します。
f:id:inosyan:20180925224609j:plain

 開始すると、まずそのチュートリアルの説明が表示されます。
f:id:inosyan:20180925224625j:plain

 つぎに何をすべきか表示されるので、指示どおりにすすめていきます。
f:id:inosyan:20180925224642j:plain

 指示は上に表示されているので、忘れてしまっても大丈夫です。必要最小限のUIに限られているので、迷わずに進めていくことができます。
f:id:inosyan:20180925224658j:plain

 チュートリアルを最後まですすめると、通常のUIに戻ります。
f:id:inosyan:20180925224712j:plain

 実行すると、にわとりが空から降ってきます! プレイヤーの位置にあわせて出現地点がかわるので、プレイヤーが動けばそれについてくるように降ってきます。
f:id:inosyan:20180925224730j:plain

 卵のアイコンをクリックすると、他の選択肢を選ぶ画面が開きます。にわとりのかわりに別の生き物を降らせてみましょう。
f:id:inosyan:20180925224748j:plain

 マインクラフトに出てくる生き物はかわいいですね!
f:id:inosyan:20180925224802j:plain

MakeCodeとマインクラフトでプログラミングを始めるための環境構築

今回は、MakeCode(メイクコード)とマインクラフトでプログラミングを始めるための環境構築について書きます。
f:id:inosyan:20180922174729j:plain

パソコンを用意しよう

Windows10のパソコンが必要になります。スマホやゲーム機ではできません。 ですが、Macでもパラレルズなどの仮想環境1Windows 10が入っていれば大丈夫です。

f:id:inosyan:20180922174752g:plain

マインクラフトを入手しよう

マインクラフトは、もともとはパソコン向けでしたが、今はスマホやゲーム機などいろんなデバイス向けの製品があります。 今回はパソコン向けのマインクラフトを使いますが、ここで注意が必要です。

一番最初に作られたマインクラフトは、Java(ジャバ)というプログラム言語で作られました。なので今は他の製品と区別するため「Java版」と呼ばれています。 以前はパソコンで動くマインクラフトと言えば、このJava版だったのですが、いまはもう一つ「Windows 10版」というものがあります。

これら2つはゲームの内容はほぼ同じですが、いろいろ違いがあり、MakeCodeと連携できるのは Windows 10版 のほうです。 なので、Windows 10版を入手するのですが、ここでも注意が必要です。

Java版のライセンスを持っていれば、Windows 10版は無料で入手できるのです。なので、昔Java版で遊んでいた方は Windows 10版を買い直す必要はありません。

新規で購入される方も、Java版を購入したほうが良いです。なぜならJava版を購入すればWindows 10版もプレイできますが、逆はできないからです。Java版はMod(モッド)という機能を拡張する機能があったり、Macでも動いたりと、Windows 10版とは違う特徴を持っているので、どちらもプレイできるようにJava版の購入をおすすめします。

f:id:inosyan:20180922174806j:plain

Java版のライセンスでWindows 10版を入手する方法は こちら に詳しく説明されています。

CodeConnection(コードコネクション)を入手しよう

MakeCodeとマインクラフトを繋ぐためのアプリ、CodeConnectionをいれましょう。これは無料でダウンロードできます。

CodeConnectionインストーラをダウンロード

ダウンロードしたら、インストーラを起動してインストールします。

f:id:inosyan:20180922174823j:plain

マインクラフトをチートモードにしよう

MakeCodeのプログラムでマインクラフトを操作するには、チート機能を有効にする必要があります。

(チートはゲームでズルをすることを指す悪いイメージの言葉ですが、マインクラフトのチート機能ははじめから搭載されている正式な機能ですので、これを使用しても何の問題もありません。安心して使ってください。)

マインクラフトのワールドの設定で、チートをONにしておきましょう。

f:id:inosyan:20180922174840g:plain

CodeConnectionのIPアドレスをマインクラフトに入力しよう

CodeConnectionを起動すると、アドレスが出てくるので、右にあるボタンを押して、クリップボードにコピーしておきましょう。

f:id:inosyan:20180922174900g:plain

アドレスは数字でできており、一見IPアドレス(インターネットのアドレス)のようにも見えますが、それとは違うようです。公開しても害がないものかどうかわからないので、念のため画像にはモザイクをかけてあります。

そして、マインクラフトに戻り、TボタンかEnter(エンター)を押します。 すると、チャット画面が開くので、キーボードの コントロールキーと Vキーを同時に押し、クリップボードにコピーしてあったアドレスを貼り付け、Enterを押します。

f:id:inosyan:20180922174916j:plain

アドレスを貼り付けたあと、Code Connectionの画面に戻ると、画面が切り替わってますね。 どの方法でプログラムするのかをここで選びます。いろいろありますね。スクラッチもあります。 今回はMakeCodeを選びましょう。

f:id:inosyan:20180922174931g:plain

CodeConnectionの画面がMakeCodeの画面になっていたら成功です。チュートリアルを一通り見てみましょう。

f:id:inosyan:20180922174950j:plain


  1. 仮想環境とは、OSの上で別のOSを動かす仕組みのこと。例えばMacの中でWindowsを動かすことができる。

MakeCodeでマインクラフトのプログラムをする意義について 子ども/大人/初心者/プロ それぞれの立場で考えてみた

MakeCodeとマインクラフトのプログラミングをみなさんにおすすめしたいと思ったのですが、まずはじめに、どうして良いのかをはっきりさせておきたくなったので、それについて考えてみました。

子ども

これからの時代は、学校の科目の一つにプログラムが加わりそうです。楽しみながら覚えたいですね。 マインクラフトは人気のあるゲームなので、これを使って勉強することは、子どもたちにとっては嬉しいことでしょう。 普通のプレイではできないようなこと(例えばおびただしい数の爆弾をいっきに爆発させる等)も、プログラムならできるということを知れば、プログラムを学ぶ意欲もわくでしょう。

f:id:inosyan:20180921011053j:plain

大人

趣味として…子供に教えるため…動機はいろいろでしょうが、マインクラフトもMakeCodeも子どもたちだけのものではないので、大人がやったっていいと思います。 マインクラフトは成果が形として見えやすいので、次の学習への意欲が得やすいです。すごい作品をつくったら子どもたちも喜ぶでしょう。

f:id:inosyan:20180921011108j:plain

初心者

タイピングが苦手だったりスペルミスで動かないとやる気が萎えてしまいがちですが、ブロックをならべる方法からはじめることで、だいぶハードルが下がります。 ブロックでのプログラムに慣れたら、JavaScriptでのプログラムに切り替え、文字のプログラムにステップアップできる仕組みが、MakeCodeには備わっています。

f:id:inosyan:20180920003503j:plain

プロ

仕事とは関係のないものを作ってみると、新しい発見があるものです。MakeCodeは実際やってみるといろいろ制約や不便さがあることに気づくと思いますが、制約のなかで結果を出すことは面白いです。プロの作った作品は、これから学ぶ人の役に立つはずですし、そこには仕事とは違った喜びがあるでしょう。

f:id:inosyan:20180920003523j:plain

さて、意義がはっきりわかったので、次回は環境構築について説明したいと思います。

MakeCode で Minecraft のプログラミングをしてみました

f:id:inosyan:20180920003351j:plain

こんにちは。久々にブロクを更新します。
最近またMinecraftをはじめました。というのも、MakeCodeというMinecraft用のプログラムを書ける仕組みを知ったからです。
まず、Minecraftを知らない人のために簡単に説明しますと、ブロックをならべたり、穴を掘ったりして家とか道具を作りながら、 モンスターと戦ったり探検したりするゲームです。
昔、娘といっしょにやっていたのですが、娘がハマりすぎてゲームをやめる時間が過ぎてもやめようとしなかったので禁止にしてしまい、それ以来やってませんでした。

f:id:inosyan:20180920003429j:plain

その当時、Raspberry Pi版のMinecraftがあって、それはScratchとつないでプログラムできました。でも、モンスターが出なかったりいろいろ製品版のMinecraftとは違うもので、製品版とは住み分けてる感じでした。

それから、MinecraftMicrosoftに買収されたり、モバイル版が出たりXbox版が出たりといろいろありましたが、動向は気にしつつもあまりプレイする意欲がわきませんでした。 Minecraftが好きなら娘といっしょじゃなくても一人でやればよかったのですが、やる気がでませんでした。 ゲームは好きですが、膨大な時間をゲームに取られるのがいやだからです。それはMinecraftに限ったことではないですが、Minecraftって積み木のようにブロックを積み上げる作業があって、それがとてつもなく時間がかかるのです。城なんてとても作れないから小さい小屋を作って我慢することになっちゃうし。。。 要するに、時間がかかる単調な作業がやる気のでなかった原因です。

ある日、MakeCodeの存在を知りました。それを使えばMinecraftとつないでプログラムでブロックを並べることができるらしい! しかも MinecraftWindows 10版なので、モンスターも出る制約の無いMinecraft! そして、うれしいことにJavaScript(TypeScript)でもコーディングできます。

Windows 10版のMinecraftJava版のライセンスを持っていれば無料で手に入れることができるようです。 僕はmacを使ってますが、Parallelsに入ってるWindows 10に無事インストールできました。

f:id:inosyan:20180920003449j:plain

MakeCodeのページを見るとチュートリアルがたくさんあるので、一通りみてだいたいできることがわかったところで、プログラムを書いてみました。 Scratchそっくりな画面からはじまりますが、JavaScriptに表示を切り替えて書きました。

MakeCodeは、子供向けのプログラム学習用として開発されたアプリで、ブロックをならべてプログラムできる点はスクラッチをやっている子どもたちには親しみやすいと思います。 ブロックとコードを表示切り替えできるので、これからプログラムを始める人にとっては理解を深めるのに良いと思います。

f:id:inosyan:20180920003503j:plain

しばらく触ってみると、カスタムブロックという、プログラムの部品を自分で作る仕組みがあり、それをTypeScriptで書けることに気づきました。 MakeCodeの画面左下のボタンを押すと、Exploler というボタンがでてくるので、それを押すとプロジェクトの中身が見れます。

はじめに開いているプログラムが書かれているファイルは、main.ts だということがわかります。 拡張子は ts つまり、TypeScriptなんです。本当はJavaScriptではなかったんですね。 厳密には Static TypeScript という言語で、Web開発などで使われている TypeScript とは少し違うのですが、ほぼ同じ文法です。

f:id:inosyan:20180920003523j:plain

新規にプロジェクトを書き始めたとき、ユーザが編集できるのは main.ts だけですが、Explorerボタンのところにある + ボタンを押すとこで、custom.ts ができます。これは、ユーザ定義のカスタムブロックを作るためのファイルで、プログラム本体はこの中に書き、main.tsからそれを呼び出すというのが基本スタイルになります。 custom.ts の中では、クラス、enum, interface などをつかって思う存分プログラムができます。 高度なプログラムを書くことも、もちろん可能です。

家を建てるプログラムと、その紹介ムービーを作ってみました。 プログラムはMakeCodeにインポートして使用できます。
家を建てるプログラム【HouseBuilder】

紹介ムービー:


【マイクラMakeCode】MakeCodeでマイクラ魔法使いになろう!(小屋づくり編)

いろいろノウハウがたまったので、次回はそれについてご紹介できればと思います。

「cubiio」でのレーザー工作に使用するイラストレーター用の拡張スクリプト「G-CODE Generator」

先日Kickstarterで「cubiio」というレーザーを発するガジェットを手に入れました。これはレーザーで木や紙や革などを切断したり模様をつけたり加工する道具です。レーザーで物を切る様子はなかなかかっこいいです。小型なのも購入の理由です。大きいと邪魔になりますからね。

f:id:inosyan:20180529004641p:plain

f:id:inosyan:20180529004658j:plain

ですが、実際使ってみると、いろんな細かいことに気づきました。それらを解決するために、私は「G-CODEジェネレーター」を作りました。

G-CODE Generator
ソースコード

課題

G-CODEをイラストレーターから書き出したい

cubiioが扱えるファイルは、ビットマップとG-CODEの2種類があります。 ビットマップは写真などのピクセルのデータを焼き付けるのに使います。フォトショップなどビットマップが扱えるアプリであれば作れるので手軽で良いですが、レーザーの出方がインクジェットプリンターと同じように、横方向にドットを描くように照射されるので、切断には向きません。切断にはG-CODEのほうが向いています。

G-CODEは機械加工で使うデータで、レーザーのON/OFF、移動、回転などのコマンドを文字列で表したものです。cubiioのサイトには、G-CODEを書き出すアプリとして、Inkscapeが紹介されていました。

How to Generate G-code Files?

普段はイラストレーターを使うので、Inkscapeの操作にはなれていませんが、イラストレーターからデータを持ってくることは可能です。はじめはその方法でやろうと思いましたが、原因不明のエラーがおきてG-CODEを書き出すことができなくなってしまいました。エラーの原因を探ろうかと思いましたが、そうしませんでした。そもそもイラストレーターから直接書き出せたほうが良いので、イラストレーター用のプラグインのようなものは無いか探してみました。ですが思っていたようなものは見つからなかったので、自分で作ってみることにしました。

照射範囲を広げたい

以前ペーパークラフトをやっていたことがあったのですが、カッターで切り抜くのが面倒なので、レーザーで切り抜くのに期待していました。ところが実際に使ってみると、10x10cmの範囲しか照射できないことがわかりました。レーザーはまっすぐに飛ぶものなので、対象物から距離をおけばいくらでも広い範囲を照射できるものだと思っていたのですが、cubiioのレーザーには焦点距離があるようです。虫眼鏡で光を集めるのに、光が一点に集まる距離が決まっているのと同じように、cubiioは15.5cmの距離に固定されているので、照射範囲も最大10x10cmです。これではペーパークラフトには狭いです。

ペーパークラフトには少なくともA4サイズの加工ができる必要があります。cubiioか紙のいずれかを動かして複数回にわけて照射すれば理論上は可能ですが、それには、正確に照射することが大事で、例えば5x5cmの正方形を照射したら、その形で正確に切り抜けるということです。ですが、照射する角度や距離をあわせるのは何度も照射と調整を繰り返さなければならないので大変そうです。そこをなんとかしたいと思いました。

解決方法

イラストレーターの拡張スクリプトを作成

イラストレーターには、スクリプトで様々な操作を自動化することができる「拡張スクリプト」という仕組みが用意されています。G-CODEの書き出しをするためにそれを使うことにしました。記述にはJavascriptを使うことができます。ですが、ES3時代の古い書式しか使えないので注意が必要です。

G-CODEの仕様を把握

スクリプトを書く前に、G-CODEについての仕様を把握する必要がありました。いろんなデバイスに対応するため様々なコマンドがありますが全部使うわけではありません。Cubiioのホームページに書いてあったコマンドは以下のとおりでした。

2. Vector graphics (G-code)

G-Code Reference :
G0 - TRAVEL XY
G1 - LINEAR XY
G2 - CW_ARC XYIJ
G3 - CCW_ARC XYIJ
G20 - UNIT_INCH
G21 - UNIT_MM (default)
G90 - ABSOLUTE (default)
G91 - INCREMENTAL
M03 - LASER ON
M05 - LASER OFF
F - SPEED 0-600 (mm/min)
S - POWER 0-255

ですが、実際にやってみると、G4 (待機)がないとうまく動きませんでしたので、上記以外にもそれを使っています。

ベジェ曲線をコマンドに変換

イラストレーターの図形はベジェ曲線で表現されています。ですが、G-CODEにはベジェ曲線はありません。あるのは

  • 2点をつなぐ直線
  • 2点を通る円(中心点、時計回りかどうかを指定)

の2つです。直線は問題ないのですが、曲線を円に変換するのは大変でした。ベジェ曲線を細かく分割して、直線と半円に変換しました。

f:id:inosyan:20180529004717j:plain

IllustratorからG-CODEデータを作れるようになったので、これからいろいろ工作してみます。

f:id:inosyan:20180529004729j:plain

ウルティマオンラインの画像解析ツール「Ultima Online image analysis tool」公開

先日の記事「ウルティマオンライン月額課金無料化した記念にjsで画像解析ツールを作成」で紹介したツールを改良したものを公開しました。

f:id:inosyan:20180428151746p:plain

「Ultima Online image analysis tool」

画面上部に説明文があります。 f:id:inosyan:20180428151813j:plain

このアプリはオンラインゲーム「ウルティマ オンライン」のツールです。

まず、プレイ中にゲーム画面のスクリーンショットを撮ります。
画像ファイルを下の領域にドラッグ&ドロップして画像を解析し、ステータス、スキル、ペーパードール画像を見ることができます。

ウルティマ オンラインのクライアントアプリには、「クラシック クライアント」と「エンハンスド クライアント」の2つのバージョンがありますが、このアプリは「クラシック クライアント」専用です。

スクリーンショットには、1つのペーパードールウィンドウ、ステータスウィンドウ、およびスキルウィンドウが含まれている必要があります。

・スキルウィンドウの各スキルを展開する必要があります。グループ名は不要なので、最初のスキルを上にスクロールアップする必要があります。

・ペーパードールには、ペーパードールウィンドウの上部に星印が含まれている必要があります。

・画像に複数のペーパードールが含まれている場合は、最初に見つかったものだけが表示されます。

・分析後、結果の表の下に「Copy Columns(カラムのコピー)」と「Copy Values(値のコピー)」ボタンが表示されます。タップして結果をクリップボードにコピーし、スプレッドシートに貼り付けることができます。

下にスクロールすると、カバンの中に

Drop Screenshot Here!
OR
Tap To Select a File

と書かれています。ここにスクリーンショットをドラッグするか、タップしてファイルを選択します。

f:id:inosyan:20180428151856j:plain

デモ用にサンプルのゲーム画面のスクリーンショットを用意しました。「Show sample image」ボタンで見ることが出来ます。

f:id:inosyan:20180428151926j:plain

その隣のボタン「Perform demo」を押すと、サンプル画像を使って実行した結果を見ることが出来ます。

f:id:inosyan:20180428151944j:plain

分析結果の表の下に、「Copy Columns(カラムのコピー)」と「Copy Values(値のコピー)」ボタンが表示されますが、これは、スプレッドシートに結果を記録するためのものです。 ボタンを押すと、クリップボードにデータがコピーされます。

コピーされるデータはタブ区切りの文字列です。テキストエディタに貼り付けるとこのように見えます。 f:id:inosyan:20180428152021p:plain

スプレッドシートに貼り付けるとカラムがセルに入ります。
f:id:inosyan:20180428152035p:plain

「Copy Values(値のコピー)」の結果をカラムの下に貼り付けていけば、カラムのセルの下にそれぞれの値が入ります。 f:id:inosyan:20180428152050p:plain

スプレッドシートに貼り付けたあとは、デザインを整えたり、目標値と比較するのも良いでしょう。 f:id:inosyan:20180428152107p:plain

プログラムの説明

プログラムについて少し説明します。 前回の記事の時点から、ペーパードールの画像分析を強化しました。

前回の時点では、ペーパードールの周りの黒い部分を除いた部分を切り抜くところま出来ていました。しかし、エッジ部分にジャギーが出ていました。
f:id:inosyan:20180428152135p:plain f:id:inosyan:20180428152208p:plain

ジャギーの原因はエッジ部分に半透明のピクセルが無いことです。なので、アンチエイリアシングの処理を行うことにしました。そのためにはエッジを半透明にすれば良いのですが、小さな画像ではすべてのエッジをすべて半透明にしてしまうとぼやけた画像になってしまいます。なので、出っ張っているピクセルだけ半透明にしてみました。
出っ張っているピクセルとは

  • 上と左が透明
  • 上と右が透明
  • 下と左が透明
  • 下と右が透明

のいずれかの場合のピクセルです。

f:id:inosyan:20180428152252p:plain f:id:inosyan:20180428152303p:plain

良くなりました。しかし、まだジャギー感があります。なので、出っ張っているピクセルの隣のピクセルも弱めの半透明にしました。ただし、赤で印を付けた箇所のように窪んでいるところは避けないと、その部分がえぐれたような結果になってしまいます。

f:id:inosyan:20180428152316p:plain f:id:inosyan:20180428152328p:plain

だいぶ良くなりました。大きな画像ではもっと入念な処理が必要ですが、これくらいの大きさの画像ではこの程度のアンチエイリアシング処理で十分です。

しかし、他のキャラクターの画像を解析した時に困ったことがおきました。このキャラクターはローブを着ているのですが、右下が変です。
f:id:inosyan:20180428152401p:plain

もとの画像はこちらです。キャラクターの画像だけ抜き出したいので余分なものを除去しているのですが、カバンの後ろに衣装が隠れていたため、カバンの形にくり抜かれています。
f:id:inosyan:20180428152419j:plain

これを解決するに、まず、このペーパードールがローブを着ているのかどうかを調べます。
マッチング用の画像を用意し、アンチエイリアシング処理をする前の状態の画像を比較します。アルファで抜かれている箇所が一致すればローブを着ていることになります。
f:id:inosyan:20180428152437p:plain

次に、抜けている穴を埋めるのですが、単純に塗りつぶすわけにはいかないので画像を使います。その画像はフォトショップで埋められている状態を想像しながら描きました。ローブの色は赤以外にもたくさんあります。すべての色に対応するためにグレースケールの画像を用意し、穴埋め処理の際にローブの色にあうように調整します。
f:id:inosyan:20180428152449p:plain

グレー画像から描画するピクセルの色を求めるのは、次の式です。

ピクセルの色 = その位置のグレー画像の色 / 基準となるグレーの色 * 対象画像から採取した色

はじめ、赤いローブをもとにグレー画像を作ったのですが、その画像だと暗すぎて、ピンク色のローブの時には合いませんでした。
グレーにも明るさやコントラストによって結果が変わってきます。なるべく平均的な明るさで作るほうが良さそうです。
どの色にもあうようにするためには、適切な明るさとコントラストのグレー画像と、基準となるグレーの色を調整する必要があります。
今回はトライアンドエラーで調整し、赤とピンクのローブではうまくいくことを確認しましたが、もしかしたらこれらを調整するうまい方法があるのかもしれません。

f:id:inosyan:20180428152511p:plain

ツールのjavascriptは小さく軽量化の必要はないため、改行や空白はそのまま残っています。ご興味のある方は御覧ください。
javascriptソース