オートタイルを実装してみる
みんなでつくるダンジョンで使うために簡易的なマップエディタを構成するためのWebComponentを作っています。
この過程でオートタイルを実装してみたのでまとめてみます。デモはこちら（グリッド上をドラッグアンドドロップするとオートタイルを配置できます）
オートタイルって何ですか
あるフォーマットに則ったマップチップから複数のマップチップパターンを自動生成するとともに、適切なマップチップを自動選択しながら配置するというものです。こんなかんじ。
（上の動画に登場するマップチップは、ぴぽや様 https://pipoya.net/ からお借りしました）
今回は、上図のフォーマットのオートタイルから、上記を実現します。WOLF RPGエディタで採用されているフォーマットですね。縦に5つのパターンのマップチップが並んています。
先ほどのオートタイルのフォーマットから、このようなマップチップを生成することができます。
基本的には、一つのマップチップを4分割して、それぞれの場所にオートタイルから切り出した画像の欠片を当てはめて生成します。
今回の処理の仕様
以下のような仕様が前提条件です。
- 選択範囲に対してオートタイルから生成したマップチップを配置する（ドラッグアンドドロップで選択範囲を設定するイメージ）
- 選択範囲に配置済みマップチップが重なったときは接続する
- 選択範囲に配置済みマップチップが重ならないときは接続しない
隣り合うマップチップを確認する
配置されるマップチップの種類は、「これから配置される、あるいは既に配置されているマップチップ」に影響されます。まずは周囲のマップチップを確認する処理を考えます。
まず、バッファに既に配置されているマップチップを転写した後、さらにこれから配置する領域（選択領域）をバッファに転写します。このとき、配置済みマップチップとの接続確認のために周囲1マス分多めに転写しておきます。
次に、バッファを走査して一つずつ隣り合うマップチップの存在を確認していきます。周囲8チップを一つずつ確認し、選択範囲部分、あるいは配置済みのマップチップの部分をマークしていきます。このとき、上図のように周囲8チップに番号を振っておくと、マークした領域をその番号の和として、一つの整数で表現できます。（2進数に直すと、各ビットの有無で領域のマークの有無が表現されます。たとえば、1 + 2 + 8 = 11 を2進数にすると、 00001011 となり、1番目、3番目、4番目のビットが1ということは、領域番号1, 2, 8 がマークされていることを示しています）
ただし、配置済みマップチップに対しては、注目しているマップチップから見た向きと、配置されているマップチップの種類との組み合わせによってはマークしないようにします。たとえば、上図の選択領域3部分のように、隣り合う配置済みマップチップが「境界」に相当する場合はマップチップ同士を接続しないのでマークしません。
また、このままだと領域のマークの結果は同じなのに、期待する結果が異なる場合があります。
このことを考慮し、斜め方向に隣り合う要素が交差パーツだったときは領域をマークしないようにします。
よって、ここで説明しているような処理を実装するには、マップ上のマップチップに（何らかの方法で）「境界」と「交差」の情報を持たせる必要があります。
疑似ソースコードを書くと以下のような感じになります。（登場するクラスやメソッドは架空のものです）
const x1 = 10 // 選択領域の始点 const y1 = 10 const x2 = 20 // 選択領域の終点 const y2 = 20 const bufferWidth = x2 - x1 + 2 // 終点- 視点 + 周囲1マス分 const bufferHeight = x2 - x1 + 2 // 終点- 視点 + 周囲1マス分 // バッファをつくる const tiledBuffer = new tiledMapData(bufferWidth, bufferHeight) // マップ（mapData）から領域を切り出してバッファに転写する（選択領域＋周囲1マス分をコピー） tiledBuffer.copy(mapData, x1 - 1, y1 - 1, bufferWidth, bufferHeight, 0, 0) // 選択領域をバッファに写す（このとき、配置済みマップチップの転写が上書きされることになる） const temporaryChip = new MapChip() // 選択領域を示す仮のマップチップ for(let x = x1; x < x2; x++) { for(let y = y1; y < y2: y++) { tiledBuffer.put(temporaryChip, x, y) } } // 配置結果を格納するバッファをつくる const width = x2 - x1 const height = y2 - y1 const result = new tiledMapData(width, height) for(let y = 1; y < height + 1; y++) { for(let x = 1; x < width + 1; x++) { const cursor = tiledBuffer.getMapDataFromChipPosition(x, y) /** * adjacent * 周囲のマップチップのマーク結果を格納する * * x : 注目点（x, y） * 周囲の数値: 領域番号 * *-----*-----*-----* * | 16 | 1 | 32 | * *-----*-----*-----* * | 2 | x | 4 | * *-----*-----*-----* * | 64 | 8 | 128 | * *-----*-----*-----* * 領域番号の和を2進数に直すと、各領域がマークされているかどうかがわかる * ex) * adjacent = 131 = 128 + 2 + 1 = 0b10000011 * adjacent = 34 = 32 + 2 = 0b00100010 */ let adjacent = 0 // 周囲のマップチップ情報を取得 const around = [ tiledBuffer.getMapData(x, y - 1), tiledBuffer.getMapData(x - 1, y), tiledBuffer.getMapData(x + 1, y), tiledBuffer.getMapData(x, y + 1), tiledBuffer.getMapData(x - 1, y - 1), tiledBuffer.getMapData(x + 1, y - 1), tiledBuffer.getMapData(x - 1, y + 1), tiledBuffer.getMapData(x + 1, y + 1) ] // 周囲のマップチップの状態を確認して領域をマークしていく // isAdjacent(chip) : 指定されたマップチップがオートタイル対象あるいは選択範囲内ならTrueを返却 // around[].boundary : 配置済みマップチップの境界の情報 // around[].cross : 配置済みマップチップの交差の情報 if (!around[0].boundary.bottom) adjacent += isAdjacent(aroundChips[0]) ? 1 : 0 if (!around[1].boundary.right) adjacent += isAdjacent(aroundChips[1]) ? 2 : 0 if (!around[2].boundary.left) adjacent += isAdjacent(aroundChips[2]) ? 4 : 0 if (!around[3].boundary.top) adjacent += isAdjacent(aroundChips[3]) ? 8 : 0 if (!around[4].boundary.bottom && !around[4].boundary.right && around[4].cross.bottomRight) adjacent += isAdjacent(aroundChips[4]) ? 16 : 0 if (!around[5].boundary.bottom && !around[5].boundary.left && !around[5].cross.bottomLeft) adjacent += isAdjacent(aroundChips[5]) ? 32 : 0 if (!around[6].boundary.top && !around[6].boundary.right && !around[6].cross.topRight) adjacent += isAdjacent(aroundChips[6]) ? 64 : 0 if (!around[7].boundary.top && !around[7].boundary.left && !around[7].cross.topLeft) adjacent += isAdjacent(aroundChips[7]) ? 128 : 0 // マークされた情報に基づきマップチップを決定 // getAutoTiledChip()の中身については後述のとおり const generatedMapChip = getAutoTiledChip(adjacent) // 結果バッファに格納する result.put(generatedMapChip, x, y) } } // 結果バッファをマップに転写する mapData.copy(result, 0, 0, width, height, x1, y1)
マークした領域情報からマップチップを生成する
あとは、マークされた情報に基づきマップチップを決定できればよさそうです。まずは、当てはめるマップチップを4分割して、それぞれにオートタイルの欠片を当てはめます。
たとえば上図のように4分割したときの左上側の欠片に着目します。このとき、欠片に隣り合う領域がどのようにマークされているかによって、5つの種類の欠片のうち一つを当てはめることができます。
これは、以下のような疑似コードで表現することができます（あくまで処理の雰囲気を伝えるためのコードなので、コピペしても動きません）。
欠片に接する領域は、以下のようにマークした領域番号の和である adjacent にビットマスクを当てて確認できます。
境界や交差の情報をどのように持たせるかも工夫の余地がありそうですね。
function getAutoTiledChip(adjacent) { const mapChip = new MapChip() // 境界の情報（デフォルトではどこにも境界がない） const boundary = { top: false, bottom: false, left: false, right: false } // 交差の情報（デフォルトではどこにも交差していない） const cross = { topLeft: false, topRight: false, bottomLeft: false, bottomRight: false } // マップチップを4分割したときの左上側の欠片を決定する // （19 = 1 + 2 + 16） if ((adjacent & 19) === 0) { /* コーナー */ mapChip.renderingArea[0] = clipAutoTile[0] boundary.top = true // コーナーは上側と左側が境界になる boundary.left = true } else if ((adjacent & 19) === 1) { /* 縦方向の道 */ mapChip.renderingArea[0] = clipAutoTile[1] boundary.left = true // 縦方向の道は左側が境界になる } else if ((adjacent & 19) === 2) { /* 横方向の道 */ mapChip.renderingArea[0] = clipAutoTile[2] boundary.top = true // 横方向の道は上側が境界になる } else if ((adjacent & 19) === 3) { /* 交差 */ mapChip.renderingArea[0] = clipAutoTile[3] cross.topLeft = true // 左上側の領域で交差していることを示す } else if ((adjacent & 19) === 19) { /* 境界なし */ mapChip.renderingArea[0] = clipAutoTile[4] } // [TODO] そのほかの部分の欠片も同様のロジックで決定する // 境界情報・交差の情報をマップチップに設定する mapChip.setBoundary(boundary) mapChip.setCross(cross) return mapChip }
残りの3つの欠片も同様に処理すれば、オートタイルからマップチップを生成できます。
実装してみたようす
このようにして実装した結果、こんなかんじに動くようになりました。
動くとけっこうきもちいい～というきもちになりました。ではでは。
2020年の週末開発ふりかえり
今年ももう終わっちゃうんですね。毎年振り返りをしている のを思い出したので、今年もやっておきます。
あいこんくらぶの店じまい
ドット絵投稿・公開サービス「あいこんくらぶ」を2020/03/01に店じまいしたのでした。それなりに長いこと（3~4年くらい？）運営していたので愛着もあったのですが、管理コストなどを考えてこのようになりました。
Twitterのモーメントに、これまで頑張って宣伝してきた様子とかが残っています。今見ると結構機能もりだくさんだったんだな～となります。
これまでに投稿された作品の一部は、#あいこんくらぶ でも見ることができます。
最終的に、公開/非公開のドット絵を合わせてそれなりの数になっていました。みなさんのドット絵ライフの充実に役立てていたらうれしいです。
ウェブサービスをはじめて店じまいして一番困っているのは、ドメインいつまで持っていようかな問題です。当分は iconclub.jp を保有しているつもりですが、 お金もかかるので難しい。。。 ということで、これから生み出されるかもしれないコンテンツはすべて garakuta-toolbox.com ドメインのサブドメインという形で提供していこうと思います。
みんなでつくるダンジョンの開発をひきつづき
開発ペースは落とし気味ではありますが、ひきつづきみんなでつくるダンジョンの開発をしていました。
- 3000px四方の大きなマップをつくれるようになった
- 見下ろしビュー（RPGみたいな）マップをつくれるようになった
- そのほか細かいいろいろ
- ゲームパッド使えるようにしたとか
- マップ内にリンクを貼れるようにしたとか
ぜんぜんマップが増えない！という課題があります。一般的なマップエディタと操作性が異なることや、オートタイル系が活躍しそうなマップ作りが大変という事情も 要因の一つと思うので、来年は、マップをつくりやすくする方向のリリースをいくつかしていきたいなと思っています。みんなつかってくれよな！
ぴこぴよv2のリリース
もともとぴこぴよは「あいこんくらぶ」のシステムを流用して作られています。あいこんくらぶの店じまいにあたり、ぴこぴよの機能だけを切り出して 運用していましたが、そろそろシステムを運用しやすいように作り直したいなということで、ぴこぴよ2をリリースしました。 （あと、React触っておきたい～とか、サーバレスなアプリケーションをつくってみたいという技術的興味に対してお手頃な規模感のアプリだったという事情もあります。 フロントはReact、バックエンドはAWS Lambdaをつかって運用しています。）
初代ぴこぴよのリリース時は「Twitter投稿時に、透明ピクセルが存在するとPNG画像がJPEGに圧縮されずに表示される」という特性を利用して、 ドット絵がきれいに投稿できるというアプリでしたが、Twitterの画像圧縮まわりのアルゴリズムも変わり、いまとなってはぴこぴよの存在意義もかなり薄れたなと思っています。
ただ、手軽にドット絵をブラウザ上で加工して投稿できるという利便性はまあまあ有用かもという気持ち（いまのところ）なので、当面は維持運用していこうかなと思っています。
自分用ライブラリを切り出してオープンソースにする業
自分のプロダクトに使うための各種ライブラリは、なるべくオープンソースにしていこうという雰囲気で活動していました。これは、自分のプロダクトが万が一 おしまいになってしまっても、付随する開発を無駄にしない（＝アウトプットが0にならない）という戦略に基づくものです。去年からこのようにふるまっていますが、 今年もなるべくこのようにしてきました。
そのほか
みんなでつくるダンジョンは、以下のウェブサービスの2D版です。
箱庭がつくれるウェブサービスをつくりたさがある～。都市開発シミュレーションではなく、単にたてものなどのアセットを配置するだけ。街を歩けて、他の人の街にも行けるといい。
— ぴよっぴ (@piyorinpa) December 30, 2020
もともと、つぶやきのようなウェブサービスをずっと作りたいなと思っていたのですが、やっぱり3Dも扱いたいな～と思い、WebGL触ってみたりなど していました。
あとがき
去年書いた振り返り の「来年はなにやるの？」に書いたことをあまりできてないじゃん！って思いましたが、そういうこともあります。ただ、去年の振り返りにも書いた「ここ最近の3Dの世界にはそこはかとないあこがれがあるので」 というのはずっと持っているお気持ちなので（そういう背景があってWebGL触り始めたというのもある）、ちまちまとそういう知識も入れていこうというのは引き続きの目標です。 一方で、3Dモデリングの世界は、モデリング以外の技術（キャラクターデザインとかとか）に関心が向かず、長続きしないので、あきらめかけている感じ。でも自分のアバターはほしいな～う～ん。
あと、自分の作品をなにかのイベントにだしたい～という気持ちもちょっとあります。これはずっとそういう気持ちを持っているのですが、中の人はとてもシャイなひとなので、 なかなか一歩が踏み出せない～みたいなところがあります。
今年は世情のあれこれもあって、わたしもずいぶんと翻弄されてしまいましたが、来年もひきつづき楽しく開発していきたいな～と思っています。
ではでは。
最近の開発記録（20201117）
こんにちは。最近の開発記録をまとめるなどしました。
見下ろしビューのマップをつくれるようになりました
みんなでつくるダンジョンで見下ろしビューのマップをつくれるようになりました。今まではサイドビューマップしか作れませんでしたが、 こんなかんじのRPGみたいなマップがつくれるようになりました。
（このマップの画像はぴぽやさん（https://pipoya.net/ ）の素材をお借りしてつくりました）
見下ろしビューモードの設定 をすることで、重力が無効になり、十字キーで上下左右に移動できるマップとなります。マップ同士の接続も通常通り行えます。
公開したてなので仕様がちょくちょくかわるかもしれませんが、なにとぞよろしくお願いします。
ちなみに、この機能の公開に当たり、描画速度の最適化なども行っています。ちょっとだけパフォーマンスが向上していると思います。
WebGLをさわりはじめました
3Dっぽい何かを作りたくなり、three.js などを使って何かをつくってみるといいかなと思っていましたが、この際WebGLをちょっとちゃんと触ってみようかなということで最近なんとなく遊んでみています。
https://webglfundamentals.org/ を参考にしながらポチポチすすめています。ようやっとシェーダとかとかが分かってきた感じ。ちょっとくらいであれば 何とかコーディングできるようになったので、箱クラスを定義して、箱をくるくるさせることができるようになりました。
いまのところ、WebGLが難しいというよりかは、線形代数的な知識を思い出すのにちょっと時間がかかる...という感じでしょうか。
これを活用して何をつくるかは決めていませんが、何か新しいものが作れるようになればいいなと思っています。
ではでは。
Deviseのアカウント情報をFirebase Authenticationにお引越ししてみる
Railsでログインまわりを実現したいときによくつかうDeviseですが、認証まわりを外部サービスにお引越しするとしたらどうなるのだろうというのをお試ししてみました。 今後ソーシャルログインなどできるようにしたいと思っているのですが、これを機会に認証まわりの処理は外部サービスにお任せするのもあり？という気持ちになっているのでした。
今回は、以下のような条件で認証まわりの面倒を見てくれそうなサービスを選んでみました。
- Twitterログインに対応していること
- 趣味程度の利用なら無料枠で収まりそうなプランがあること
- 既存のアカウントがお引越しできそうな環境があること
ということで、Firebase Authentication を試しに使ってみることにしました。REST APIも充実していそう なので、このへんをつかってサーバサイドでもよしなにできたり、既存の実装に合わせてスムーズに移行できそう？などをもくろんでいます。
まずは、ドキュメントに記載されたフォーマットに従い、アカウント情報をCSVファイルとしてエクスポートします。試しにダミーアプリケーションの開発環境のユーザーをエクスポートしてみます。
PostgreSQLをお使いの場合はこんなかんじのコマンドでエクスポートできました。データベースの users テーブルをSELECTして users.csv に保存します。
psql -h localhost -p (ポート) -d (データベース名) -U (ロール) -c "select id, email, case when confirmed_at is not null then 'true' else 'false' end as validated, regexp_replace(encode(encrypted_password::bytea, 'base64'), '\n', '') from users" -A -F, -t > users.csv
Firebase CLIをインストールして、Project IDを確認します。（以下のProject IDはダミーです）
firebase projects:list ✔ Preparing the list of your Firebase projects ┌──────────────────────┬──────────────────────┬────────────────┬──────────────────────┐ │ Project Display Name │ Project ID │ Project Number │ Resource Location ID │ ├──────────────────────┼──────────────────────┼────────────────┼──────────────────────┤ │ Hoge Project │ hoge │ ?????????? │ ??? │ └──────────────────────┴──────────────────────┴────────────────┴──────────────────────┘
DeviseはデフォルトではBCRYPTでパスワードをハッシュ化して保存しているので、デフォルトのままならユーザーデータの登録コマンドは以下のようになります。
firebase auth:import users.csv --hash-algo=BCRYPT --project 'hoge'
これで登録ができました。ためしにログインエンドポイントをリクエストしてみます。
curl 'https://identitytoolkit.googleapis.com/v1/accounts:signInWithPassword?key=(API Key)' \
-H 'Content-Type: application/json' \
-data-binary '{"email":"test@example.com","password":"password","returnSecureToken":true}'
なんかそれっぽいリクエストが返ってきた～。
{ "kind": "identitytoolkit#VerifyPasswordResponse", "localId": "xxx", "email": "test@example.com", "displayName": "", "idToken": "xxx", "registered": true, "refreshToken": "xxx", "expiresIn": "xxx" }
メールアドレスの検証（サインアップしたら確認メールのリンクを踏まないとアカウントが有効化されない機能）とかとか、必要な機能はそろっているようなので、ためしにいろいろいじってみて、よさそうならお引越しも検討しようと思ったのでした。
認証まわりの機能追加は、セキュリティとの兼ね合いもあってなかなか慎重になってしまうので、信頼できそうな外部サービスにお任せすると気持ち的にも楽ですし。
ではでは～。
ダンジョンの中におみせを出してみました
こんにちは。最近「みんなでつくるダンジョン」に「リンク先遷移機能」を実装しました。こんなかんじに、マップ内からほかのページへと誘導できます。
この機能については メッセージ表示プラグイン に使い方を載せていますので、気になる方はみてみてください。
話はかわりますが、実は私はじぶんの絵のステッカーを作って使いたいなと思い、こんなお店をこっそり開いていたのでした。
こんな感じに使っています。絵の出来はともかくとして、個人的にはそれなりに満足しているわけです。ちなみに貼ってから2年くらい経っていそう。
で、売れるかどうかはともかくとして、マップ内でお店を開くことができたら面白いかもな～とずっと思っていたのですが、今回作った「リンク先遷移機能」をつかえばそれっぽくなるのでは？と思い立ち、 こんなマップをつくってみたのでした。
品物の前の看板を「みる」（PCの場合はZキーを押す）と、販売ページにジャンプできるという仕組みです。ちなみに、このマップで売っている物たちは、100円くらいの利益が出るようになっています。
これらのおみせっぽいマップをつなぐための「デパート」マップもつくってみました。
このデパートマップ、みなさんのマップも接続することができます。じぶんのおみせマップを接続したうえで、デパートマップ内のサービスカウンタで出店申請をしていただければ、お店への入り口の扉を開けます。 （お試しな試みなので、とくにルールなどは設けていないのですが、お店の扉を開ける前に接続先のおみせのようすを見させていただきたいと思います。ただし、暴力的・性的要素の強いもののデパートマップへの接続は今回はNGとさせていただきます）
たとえば、マップ素材を展示しつつ販売ページに誘導するとか、ゲームのマップの一部をダンジョン上に作ってゲームの販売ページに誘導するとか、そんなかんじで使ってみていただけるといいのかなと思っています。 もちろん、これ以外のつかいかたもOKです。 何かわからないことがあれば @piyorinpa までお気軽にどうぞ。
ではでは～
あらためてみんなでつくるダンジョンの紹介をば
こんにちは。実は公開から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四方）。これと見比べると、大きくなったな～感が伝わるでしょうか。
というわけで、ひさびさの開発報告でした。ゆるりとやっていきますが、ご要望などあればツイッターなどなどでお声掛けください。
ではでは～
