手本画像を重ねて表示する Blue Marble
2025年7月頃よりWebで公開されている世界地図上にドット絵を書き込んでいけるサービス『Wplace』が公開されました。この記事では、手本となる画像を重ねて表示しドット絵を書くのを補助するプラグイン『Blue Marble』の使いとインストール方法を紹介します。
Wplace Blue Marble
インストール方法
PC版Google Chromeの環境にて実行に成功しましたので、PC版Google Chrome 向けの紹介となります。
最初に『Blue Marble』を実行するためのベースとなる拡張機能『Tampermonkey 』のインストールと設定を行います。
Tampermonkey のインストール
以下のサイトから、Chromeの拡張機能の追加を行います。
画面右上のChromeに追加というボタンから拡張機能の追加が可能です。
Tampermonkey の設定
その後、デベロッパーモードの許可と、ユーザースクリプトの許可の設定を行います。
まず、chrome拡張機能の一覧に追加されたTampermonkeyのアイコンを右クリック「拡張機能を管理」をクリックします。
画面上部に、デベロッパーモードというボタンがあるので、クリックすることで許可を行います。色がついた状態になれば、デベロッパーモードになっています。
ユーザースクリプトの許可
設定項目内の、ユーザースクリプトを許可する、の項目のボタンをクリックし使用可能にします。
Blue Marbleのインストール
ここまでで、Tampermonkey の設定は完了したので、Blue Marbleのインストールを行います。
上記のサイトの最新のバージョンのBlue Marbleを選択。私が作業を行った際は、Ver 0.83.0 でしたので、画面上のその項目をクリック。
画面下部のAssetsの中に、『BlueMarble_user.js』という項目があるので、クリックするとTampermonkey が起動しインストールが完了します。
ここまで作業を終えた状態で、Wplaceを開くとBlueMarbleが起動します。
初回の起動時には、情報の収集に関する設定のon off どちらにするかの選択が表示されます。こちらはソフトウェアの改善につながる情報の送信を許可するか？という質問になっています。許可する場合は、Enable、許可しない場合は、Disableを選択します。
ここまでの作業を終えると、画面右上にBlueMarbleのUIが表示されるようになります。
BlueMarble 使い方
手本となる画像の位置を決める
まず、手本となる画像を置く位置を決めます。
BlueMarbleのUIの内、上記の部分が座標となっています。
画像の左上の位置にしたい画面上の座標をタップし、地図上にアイコンを立てた状態で、Blue Marble のUI上にある4つの座標の左にあるピンのボタンを押すことで現在表示しているピンの座標を入力することができます。
手本となる画像のアップロード
Upload Templateからベースにしたい画像を選択することでアップロード。なお、この時手本にする画像はWplace上で使える色が使われてない場所は綺麗に表示されないようなので注意が必要です。
画像のアップロード後、Createボタンを押すと、ベースとなる画像が画面上に展開されます。
Createボタンの横のEnable、Disableは、手本となる画像の表示の切り替えを行うボタンとなっており、Enableで表示、Disableで非表示となります。
成功すると上記のように手本となる画像が表示されます。なお、自動で色を塗る機能は規約上禁止されているため、手本にして表示した画像に対して手作業での色塗りが必要となります。
Bluemarble公式サイト https://bluemarble.camilledaguin.fr
ドット絵教室
コメント