画像をマインクラフトのドット絵にして自動配置する

3年前に投稿したマインクラフトに関する記事がいまだに人気なので、
せっかくならマインクラフトに関することを色々投稿していこうと思います!

今回は、写真やイラストなどの画像マインクラフトの世界にブロックのドット絵として、
自動で配置していくことに挑戦しました。


完成のイメージ動画です。
サーバーログが地獄みたいになってますが、一応動いています。

はじめに

まず、今回やろうとしていることはマルチプレイモードで自身がホストサーバーコンソールを触れる状態を想定しています。
当初画像の解析→マイクラのブロックに割当というプロセスも自分で実装しようと思っていたのですが、
検索したら既にやっている方がいましたw

Pic2Block for Minecraft

Pic2Block for Minecraft

Minecraft block generator

しかもjavascriptのみで動作しブラウザ上で解析してくれる素晴らしいものでした。
これ以上に良いものを作れる気がしないので、
今回はこちらのサービスを使い実際にサーバーにアウトプットする部分だけ作りました。

使い方

Chromeをお使いの方に向けての解説になります。
他のブラウザでも多分同じ方法でいけると思いますが、
うまく動かない場合はChromeを試してください。

①まず適当なサイトをブックマーク登録する

アドレスバーの右側の☆を押し、ブックマーク登録して下さい。
後から中身を入れ替えるので、どこのサイトでもOKです。

②内容を書き換える

先ほど登録したブックマークを右クリックし、編集を押します。

名前 → 何でもいいです。画像では「コマンド変換」にしてます。
URL → 以下のコードをコピーして貼り付けてください。

javascript:(function()%7Bvar time = new Date().getTime();var s = document.createElement(“script”);s.src = “https://stg.tokaisodachi.com/bookmarklet/pic2minecraft.js?v=” + time;s.charset=”UTF-8″;document.body.appendChild(s);%7D)();

終わったら保存しておいてください。

③ブックマークレットを実行する

下記リンクからPic2Blockさんを開きます。

Pic2Block for Minecraft

Pic2Block for Minecraft

Minecraft block generator

先ほど作ったブックマークをクリックします。

上手く動いていればこのように項目が増えて変換ボタンが赤くなります。

④画像をセットして変換する

通常通り、画像/大きさ/ブロックタイプを選び、起点となる座標を入力します。
最初は念のため大きさは小さめにしておいた方がいいかもしれません。

起点となる座標というのは、
イラストの一番下、一番左のブロックの座標のことです。
その座標を軸に、X方向に配置されるので、入力の間違いに気を付けてください。
(ブロックが存在していても問答無用で上書きされます)

座標の調べ方は、F3キーを押し、適当に置いたブロックにカーソルが合わせると
Targeted Blockという所に、そのブロックの座標が表示されるのでわかりやすいです。

設定が終わったら「変換してコマンドを出力」ボタンを押してください。

⑤コマンドをサーバーで実行する

ブラウザに以下のようにコマンドがずらーっと並んでいると思います。

※詳しい人ならわかると思いますが、本来fillコマンドは範囲選択して使うものなのに、
1ブロック毎にコマンド化しているので、結構重いと思います。実行する際は注意してください。

さて、上のコマンドをCtrl+Aで全て選択して、Ctrl+C(コピー)して下さい。
それをサーバーのコンソール(黒い画面のやつ)にCtrl+Vで貼り付けてください。

PCによっては、処理が走り出すまでに少し時差があるかもしれません。
サーバーログが地獄のように流れだしたら、きっとマイクラの世界には画像が生成されているはずです。

謝辞

Pic2Blockという素晴らしいサービスを作られたkult様に心から感謝いたします。
Qiitaにて技術解説されてますので、興味のある方は是非ご覧ください。

投稿者

じん
「とかい育ち」という3人組でゲーム実況やってます!
生放送の画面作りにこだわりだして、そのことをブログに書かせてもらってます。
プログラミングは独学で素人レベルですが、動けばいいの精神で色々作ってます!

コメント一覧

  • Comments ( 2 )
  • Trackbacks ( 0 )
  1. ボタンが出てこない…

コメントを書く

*
*
* (公開されません)