鳥小屋.txt

主に自作ゲームをつくったりしているよ。制作に関することやそうじゃないことのごった煮ブログ

画像ナラベール

タスカールとかそういうネーミング、好きですよ

「TileLoop」というWebツールをつくった

たまにはWebなRuたん。

ということで、ちょっとしたWebツール「TileLoop」をつくりました。
上のページから使うことができます。
無茶してるので、たぶんChromeくらいしか動かないかもしれない。

1mmも説明がないストロングなページですが、
画像をいくつか入れたらタイルみたいに並んだ画像が出てくるツールです。

f:id:ru_shalm:20200606174315p:plain:w480

↑ こんな画像がつくれます。

どういうわけか?

プロフィール画像(の背景)とかで、よくゲームのスクショとかを並べた感じの画像をつくることがあります。

f:id:ru_shalm:20200606173124p:plain:w480

↑こういうやつ。

これ、最初のうちは作るたびに毎回手で並べたりしていたのですが、
明らかに面倒くさすぎるので、なんかいいツールとかサービスとかないかな~と探していました。

コラージュ系のサービスはいっぱいあるのですが、
僕がやりたいのは画像を大量にポイっとしたらポン!って出てくる程度のやつでいいのに
複雑な機能がいっぱいありすぎてなかなか使いづらい…!
どうせ加工はPhotoshopでやったほうが早いって。

最終的にはHTMLで並べてスクショ取ればいいのでは???とかやっていたのですが、
それはそれで毎回やるのも面倒なので、今回ツール化しました!

なかみのこと

最初、自力で canvas に並べようかなと思っていたのですが、
ドロップシャドウとか考えたくないし、うーん……

そんな中、ちょっと別件でSVGをつかってグリグリ動くものを作る機会があったので、
SVGでつくって最後に画像保存するときだけ canvas に転写すればいいな!というアプローチを採用しました。

引っ掛かりポイントとしては、SVGの中で <Image> タグを使っていたのですが、
URL.createObjectURL とかで作った blob URL を入れると canvas に転写するときに怒られてしまうので、
ぜんぶ data URL にしています。サイズがクソでかい!

なので4Kとかの画像を入れるとブラウザがやばいことになりますが、
まぁショボショボツールだしいいよね……


ところで、「TileLoop」という名前をテキトーにつけていたのですが、
この記事を書くタイミングで「あれ、別にループはしてなくない?」ということに気づきました。

まぁいっか!!!!!!!!!!!!!