あらためてみんなでつくるダンジョンの紹介をば
こんにちは。実は公開から1年経っている「みんなでつくるダンジョン」ですが（公開日は2019/4/27）、最近は細かいところに手を入れたりしています。パラメータ調整でキャラクタの動きを操作しやすくしたりとかとか。 公開からだいぶたったということで、改めてどんなものになったのか？という点をご紹介したい～ということでこの記事を書いています（公開当初から機能もだいぶ増えたので、あらためてそのあたりも整理しながら書いていきます）。
みんなでつくるダンジョンってなに？
アクションゲームのようなマップをつくることができます。つくったマップ上をたんけんしたり、他のマップとつなげて行き来できたりします。 （この辺の説明は 公開当初の記事 からあまり変わりありません）
マップをつくったり
じぶんで用意した画像などの素材をつかったり、他の方が公開している素材を利用してアニメーションを作ったり、壁などのパーツを配置してマップをつくっていきます。
（1MB以内のPNG画像を30枚まで登録できます。いわゆるマップチップ・タイルセットと呼ばれる形式の画像があるとつくりやすいですが、必ずしもこれらの形式である必要はありません。 くわしくは 📚ヘルプ を参照してください。）
はじめてマップをつくるときは、公式素材を活用してアニメーションをつくってみるといいかもです。マップ作りに向いている素材を確認してみてください。（とりあえず📚チュートリアル とか、📚つくりかた動画 をみるとよいかもです）
また、マップ上に配置した「パーツ」に動きを与えたりできる「プラグイン」という仕組みを使うと、ちょっとしたゲームっぽくできます。例えば以下のようなマップがつくれます。
ちなみに、PC・スマートフォンいずれのデバイスでもマップをつくったりあそんだりできるので、じぶんのマップをどこにいてもお手入れできます。
2MB以内のoggファイルをアップロードすることができ、マップのBGMとしてつかうことができます。
マップを公開したり
つくったマップを「公開」状態にしておくと、マップ毎にURLが発行されるので、これをつかえばブログやSNSでマップを共有できます。たとえばこんなかんじ。
広いマップがつくれるようになったhttps://t.co/BnYaI7LjII #みんなでつくるダンジョン
— ぴよっぴ (@piyorinpa) August 12, 2020
「この画像素材を使うとこんなマップがつくれます」みたいなデモ用途でつかったりするのもいいかもですね。みんなでつくるダンジョンはドット絵に比較的優しい（拡大してもドットがぼやけない）ので、ドット絵を良い感じに見せるための、展示場のようなマップをつくってみてもいいかもしれません。
マップをつなげたり
「コネクタ」と呼ばれるワープ地点のようなものを使うとほかのマップと接続することができます（ほかのマップにワープできるようになる）。じぶんでつくったマップをたくさんつなげればより広い世界をつくることができます。
たとえば、以下のマップに入ってみると、マップの端などに矢印マークが見えますが、これがコネクタです。触れると設定したマップに移動できます。 dungeon.garakuta-toolbox.com
また、ほかのひとが公開している「コネクタ」とも接続できるので、みんなでつくるダンジョン内の世界にマップを参加させることもできます。マップ同士のつながりは ワールドマップ でみることができます。
マップをたんけんしたり
コネクタでつながれたマップをたんけんしてみるのもよいです。後述する「アイテム」をあつめたり、マップによっては「いいね」ができるパーツが設置されていることもあるので、いいなとおもったら「いいね」してみましょう。（📚いいねカウンタの設置方法はこちら）
（マップの製作者さんへリアクションを届けるいい感じの仕組みをもう少し用意したいなと思っているのですが、何かいいアイデアがあったらおしえてください）
アイテムをつくったり
「アイテム」をひろったり、ひろえる「アイテム」を設置したりできます。ひろったアイテムは眺めたり、場合によっては使うことができます。 （プラグインを駆使すると、アイテムをつかったときに起きる動作をつくることができるので、マップ作りに興味のある方はぜひに。くわしくは📚ヘルプ を見てみてください）
まとめ
というわけで、「マップをつくって・つなげて・あそぶ」ことができるウェブサービスなのでした。もっとマップが増えるとたのしいなと思うので、ゲームっぽい画像素材をお持ちの方だったり、とりあえずマップをつくってみたいぞという方はぜひとりあえずマップをつくってみてください。画像素材もまだ少ないですが、他のユーザーの方々に登録いただいているものを（一定条件の下で）つかうことができます。（登録されている素材を確認してみる）
ではではー
みんなでつくるダンジョンで大きなマップをつくれるようになったよ
おひさしぶりです。生活まわりでいろいろあり、最近全然開発できていなかったのでブログの更新もすっかりご無沙汰になっていました（みたいなことを6月あたりにも言っていたけど、いろいろとむずかしく、なかなか本調子にならないのだ。）
ひきつづきちょっとずつやってゆくのでよろしくお願いします。
みんなでつくるダンジョンで大きなマップをつくれるように
いままではマップの最大面積が1500×1500pxという制約がありましたが、これを 3200×3200px に緩和しました（この対応にあたり、描画負荷の調整などを行っています）。 また、マップに設置できるパーツ数も100から150まで増やしました。 以下の画像が目一杯大きなマップをつくってみた様子です（マップチップの大きさは32px四方）。
上記マップは以下から遊ぶことができます
「最大面積」の制約なので、たとえば高さを小さめにとれば、そのぶん幅を大きく取ることができます。
ちなみに、以下の画像が概ね今までのマップの最大面積1500×1500pxに近いマップのようすです（マップチップの制約があり、厳密には1440px四方）。これと見比べると、大きくなったな～感が伝わるでしょうか。
というわけで、ひさびさの開発報告でした。ゆるりとやっていきますが、ご要望などあればツイッターなどなどでお声掛けください。
ではでは～
開発の記録（ぴこぴよにいくつかの機能を追加しました）
この間公開したぴこぴよv2にいくつかの機能を追加しました。
余白なし画像の投稿機能
余白のない画像を投稿できるようになりました。余白を付けると、下図左側のようにツイッターのサムネイル画像の大きさに概ね一致するような画像が生成されますが、下図右側のように（これまでのぴこぴよのように）セットした画像に合わせた画像サイズで 投稿できるようになりました。
パレットつき画像の投稿機能
セットした画像に含まれる色を抽出した色パレットをいっしょに投稿できるようになりました。実験的な機能なので、今後ちまちまと仕様を変えたりするかもしれませんが、よければつかってみてください。
これで、これまでのぴこぴよでできたことはv2でも概ねできるようになったかな、という雰囲気です。ぴこぴよv2に関しては今後もちまちまと手を入れるかもしれないですが、 これまでのぴこぴよは近い将来に廃止されるのでご注意ください。
ではでは。
ぴこぴよv2を試験的に公開しました
だいぶご無沙汰でしたが、個人的なあれやこれやがありちょっと開発をお休みしていました。いまは細々と週末開発を再開し始めています。
そして、突然ですが「ぴこぴよ」（ドット絵ツイート支援サービス）を全面的に作り直したv2版を試験的に公開しました。
- これまでのぴこぴよ : https://picopiyo.iconclub.jp
- あたらしいぴこぴよ : https://picopiyo.garakuta-toolbox.com
しばらく新旧ぴこぴよを並行運用し、近い将来のうちに「これまでのぴこぴよ」は廃止します。（廃止に伴い、Mastodonへの投稿機能の提供を終了します）
ぴこぴよってなんだっけ
改めましてぴこぴよの簡単な紹介をば。ドット絵をきれいに（アンチエイリアスをかけず、エッジがつぶれたりぼやけたりしないように）拡大してTwitterに投稿できるウェブサービスです。#picopiyoの検索結果をみてみる
ドット絵はその性質上、拡大して見せたり、または原寸大で見せたりしたくなるので（個人の感想です）、異なる倍率のドット絵を並べた画像も投稿できます。
あたらしいぴこぴよの機能
基本的には今までのぴこぴよとかわりませんが、微妙に機能が追加されていたりします。
たとえば、ならべて表示する画像の位置を調整できるようになりました。ほかにも、画像の並べ方（上下・左右・中央揃えなど）のバリエーションが増えています。
また、これまでのぴこぴよと異なり、最終的に投稿される画像の大きさが固定となるようにしてみています（この仕様は反応を見て調整をしようかなと思っています）。編集画面の枠内のとおりの画像がTwitterに投稿されるようになっています。
今後もパレット画像の添付機能など、機能拡張ができるといいなと思っているので、使ってみた感想などをぜひツイッター（https://twitter.com/piyorinpa）でおしえてください。
ぴこぴよの裏側
あたらしいぴこぴよは、ほぼ1から作り直しています。フロントエンドはReactで、サーバ側のサービスはAWS LambdaとAPI Gatewayを組み合わせて開発しました。フロントエンドSPAのホスティングはCloudFrontをつかったりと、AWSにだいぶ寄せた感じになっています。AWS SAMでローカル環境下での開発や構成の管理、デプロイも比較的楽にできています。
どうしてこのような構成にしたかというと、趣味開発のウェブサービスをこれからも作り続けようとしたときにお金の問題は切っても切り離せないな..と考えたからなのです。公開するにしろ、自分だけがつかう非公開サービスとするにしろ、固定費としてサーバ（や、各種PaaS）の利用料は発生します。趣味開発レベルのユーザー数や規模だと、サーバリソースを利用した分だけ支払う従量課金システムのあれこれをつかったほうが、結果的にお安くサービスを作ったりやめたりできそうという気になってきています。あとは開発のしやすさなどを考慮して、つかうバックエンドのサービスを決めた結果このようにしています。
ということで、いったん構成が比較的楽なぴこぴよで試してみて、よさげなら今後の開発の選択肢として活用していきたいなという感じなのでした。
ぴこぴよv2は生まれて間もないのでいろいろと調整中なところはありますが、使ってみていただければと思います
ではでは～
ドット絵をきれいに表示できるCustom Elementをつくってみた
ずいぶん前のエントリーのとおり Custom Elementをつくってみたわけですが、この経験をいまいち活用できておらず、もうちょっと実用的なものを作ってみようという気持ちになりました。そこで、「ドット絵を拡大してもきれいに表示される要素」を作ってみました。
ソースコードはこちら。 github.com
実際に動いているようすはこちら。 <pixelart-img> タグで画像を描画することで、拡大してもぼやけたりしません。
garakuta-toolbox.com
（ほんとは <pixelart> タグにしたかったのですが、Custom Elementsの命名規則として「ダッシュが一つ以上入っていること」が必須（ref）のため、<pixelart-img> としています。）
Canvasをつかって、等倍のドット絵をn倍にした画像を動的に作成することで、アンチエイリアスがかからないようにしています。最近のブラウザなら image_rendering プロパティを利用して似たようなことができますが、ブラウザによって若干動作が異なったり、IEでは使えなかったりということでこのようにしてみました。
npmパッケージとして公開しているので、jsDelivrなどのnpmパッケージを配信してくれるCDNをつかって、以下のようにお気軽につかえます。
<pixelart-img scale="2" src="path/to/pixelart.png"></pixelart-img> <!-- スクリプトはすべての pixelart-img 要素よりも後に配置される必要があります --> <script src="https://cdn.jsdelivr.net/npm/@piyoppi/pixelart-element@0.0.5/dist/pixelart-element.bundle.js"></script>
IEなど一部Custom Elementsに対応していないブラウザも対応したい場合は、たとえば以下のように別途Polyfillを入れる必要があります。
<html> <head> <script src="https://unpkg.com/@webcomponents/webcomponentsjs@^2/webcomponents-bundle.js"></script> </head>
なにかつかえそうなものを作ってみたくなり、とりあえず公開してみたのでした。自分でも実際に使ってみて、適宜改善していこう～という気持ち。
ではでは～。
最近の開発の記録(20200416)
これ系のタイトルでブログ書くの久々だな...という気持ちになりましたが、開発の記録をブログ記事にしてなかったということか...。
というわけで、ひさびさに開発報告をばをば。
みんなでつくるダンジョンに「アイテム取得機能」がついたよ
みんなでつくるダンジョンで、アイテムをつくったり、アイテムを集めることができるようになりました。
（墨cmさんにお借りしているマップチップに加え、 @u_ron_tya さんから背景画像をお借りしています。この背景画像は公式素材として提供しているので、使ってみたいという方はぜひに～）
マップ上にアイテムを置いたり、マップを訪れたひとに拾ってもらうことができます。プラグインを活用すれば、拾ったアイテムをつかってドアをあける、などのギミックをつくることもできます。
ログインした状態で以下のマップに訪れると、アイテムをひろってみることができます。 dungeon.garakuta-toolbox.com
くわしくは📚ヘルプ を見てみてください。
じつは、みんなでつくるダンジョンに関してはそのほかにも、トップページをちょっとだけ変えたり、マップ作成画面の各所に解説を入れたりと、ちまちまと手を入れていたりします。
Gamepadべんりライブラリを作っているよ
以前の記事 でブラウザからゲームパッドをつかうためのべんりプログラムを書いてみたのですが、これをnpmパッケージとして提供すべく準備しています。とりあえず最低限のテストコードを用意していいかんじに動くようになったので、あとはわたしのやる気次第...。
いつも名前を付けるときにだいぶ悩むわけですが、いまのところ「ぴこぴこぱっど」で行こうと思っています。
3Dアバターの作成周り
もうず～～っと「つくりなおします」といい続けてはやNか月...。みたいになってしまっていたのですが、なんとなく形になりました。口や目は動かないけど、まあなんとかそれっぽくはなったかなという雰囲気です。今回は等身をちゃんと考えてつくったつもりなので、以前のモデルみたいに「なんか着ぐるみみたい..」という違和感は感じないはず、だと思いたいです。
— ぴよっぴ (@piyorinpa) March 28, 2020
そのほか
昨今のあれやこれやですっかり自宅にいる時間が長いわけですが、そのせいなのかどうかはわからないけど、最近やる気スイッチが壊れかけているのでした。ひとりごとでもいいからぶつぶつ言いながら作業するのはどうか、ということで、（Discordをなんとなくつかってみたいということもあり）Discordのサーバ を立ち上げて、ここで独り言を言いながら作業するという試みをしてみています（テキストチャットのみ）。とりあえず飽きるまではやってみるつもり。なんとなく気になる方や、開発状況をなんとなく見たい方などがもしいれば、お気軽に入ってみてください（あいさつとかも不要ですし、話しかけてもらってももらわなくてもどっちでもよいです。わたしもそのへんはテキトーなのでした）。
ではでは～。
ややおてがるなプロジェクタを買ってみた
このご時世でなかなか外出できず、家で楽しく過ごしたいな～という気持ちになりながらインターネットを回遊していると、最近はお安いプロジェクタがちらほらあるという情報にたどり着きました。
Amazonで検索すると、ほんとうにお安いものだと1万円を切る価格、フルHDの解像度があるものでも2万円台で買えるということでなんとなく興味を持ち始めて...。というかんじで色々調べているうちに欲しくなり、 最終的には以下の製品を買ってみたのでした。
XGIMI社のZ6 Polar という製品に、シーリングライト付きプロジェクタで有名な「popin Aladdin」のOSを搭載したという感じのもののようです。 いわゆる「中華プロジェクタ」よりはやや高めの価格ですが、小型でフルHDの割にはそこそこ明るさがありそうで、かつ搭載されているOSが優秀そうということで購入してみました。（ちょっと前に割引セールをつかって購入しましたが、この記事を書いているときも別のキャンペーンで割引セールしていたので、そういうタイミングを狙ったほうがよいのかも）
本体底面には三脚用のネジ穴があるので、こんなかんじに三脚に取り付けて運用しています。当初は壁面の棚に置こうと思ったのですが、思ったよりも投影される映像が大きくなり、他の家具が邪魔をしてしまう...というかんじになってしまいました。案外家具の置かれていない壁を作るのって難しい...。
部屋がそこそこ暗ければちゃんと楽しめそうです。真っ暗だとなおよし。ちなみにでこぼこした白い壁紙に直接投影していますが、気にする人はデコボコがきになるかも、という程度で、映像に集中していればそんなに気にならないかなという雰囲気です。でも、たぶんスクリーンに映したほうがもっときれいにはなりそうです。（とはいえスクリーンを設置するのは結構労力必要そうだし、当面は壁面に直接投影する運用にするつもり）
ちなみに、YouTubeなどはプロジェクタ内のアプリで見られますが（別途インストールが必要）、わたしがよくつかっているdアニメストアは対応していないっぽさそうで、ふだんはChromecastをつかって各種動画配信サービスを楽しんでいます。
ひとつ難点を挙げるとすると、台形補正を利用するとフレームレートが下がるらしく、台形補正をかけた状態でゲームをプレイしてみたら無視できないほどカクカクしているように見えました。大画面なのでフレームレートが低い状態でゲームをすると酔ってしまうかも。なので、フレームレートが重要そうな映像を映すときには、基本的には投影面と平行に設置することが望ましそうです（台形補正をかけていても、私の場合は映画やアニメの視聴には違和感を感じませんでした）。
このような、今まで買ったことのないような部類の製品を買うときは、ネットでいろいろ調べてから買うのですが、ちょっとだけプロジェクタのこともくわしくなった気がするのでそういう過程もたのしかったかも。
実は購入後に初期不良で交換対応してもらっていたこともあり、本格的に使うのはこれからというかんじなのですが、これで自宅生活がよりよくなるといいなという気持ちです。 ではでは。
