オートタイルを実装してみる

みんなでつくるダンジョンで使うために簡易的なマップエディタを構成するためのWebComponentを作っています。

github.com

この過程でオートタイルを実装してみたのでまとめてみます。デモはこちら(グリッド上をドラッグアンドドロップするとオートタイルを配置できます)

オートタイルって何ですか

あるフォーマットに則ったマップチップから複数のマップチップパターンを自動生成するとともに、適切なマップチップを自動選択しながら配置するというものです。こんなかんじ。

f:id:piyorinpa:20210105001229g:plain
自動で道を生み出しているようす

(上の動画に登場するマップチップは、ぴぽや様 https://pipoya.net/ からお借りしました)

f:id:piyorinpa:20210105001941p:plain
オートタイル

今回は、上図のフォーマットのオートタイルから、上記を実現します。WOLF RPGエディタで採用されているフォーマットですね。縦に5つのパターンのマップチップが並んています。

f:id:piyorinpa:20210105235014p:plain
オートタイルから生成されたマップチップたち

先ほどのオートタイルのフォーマットから、このようなマップチップを生成することができます。

基本的には、一つのマップチップを4分割して、それぞれの場所にオートタイルから切り出した画像の欠片を当てはめて生成します。

今回の処理の仕様

以下のような仕様が前提条件です。

  • 選択範囲に対してオートタイルから生成したマップチップを配置する(ドラッグアンドドロップで選択範囲を設定するイメージ)
  • 選択範囲に配置済みマップチップが重なったときは接続する

f:id:piyorinpa:20210106000842g:plain

  • 選択範囲に配置済みマップチップが重ならないときは接続しない

f:id:piyorinpa:20210106000854g:plain

隣り合うマップチップを確認する

配置されるマップチップの種類は、「これから配置される、あるいは既に配置されているマップチップ」に影響されます。まずは周囲のマップチップを確認する処理を考えます。

f:id:piyorinpa:20210107002414p:plain
バッファに転写

まず、バッファに既に配置されているマップチップを転写した後、さらにこれから配置する領域(選択領域)をバッファに転写します。このとき、配置済みマップチップとの接続確認のために周囲1マス分多めに転写しておきます。

f:id:piyorinpa:20210107014052p:plain
バッファを走査して領域をマーク

次に、バッファを走査して一つずつ隣り合うマップチップの存在を確認していきます。周囲8チップを一つずつ確認し、選択範囲部分、あるいは配置済みのマップチップの部分をマークしていきます。このとき、上図のように周囲8チップに番号を振っておくと、マークした領域をその番号の和として、一つの整数で表現できます。(2進数に直すと、各ビットの有無で領域のマークの有無が表現されます。たとえば、1 + 2 + 8 = 11 を2進数にすると、 00001011 となり、1番目、3番目、4番目のビットが1ということは、領域番号1, 2, 8 がマークされていることを示しています)

ただし、配置済みマップチップに対しては、注目しているマップチップから見た向きと、配置されているマップチップの種類との組み合わせによってはマークしないようにします。たとえば、上図の選択領域3部分のように、隣り合う配置済みマップチップが「境界」に相当する場合はマップチップ同士を接続しないのでマークしません。

また、このままだと領域のマークの結果は同じなのに、期待する結果が異なる場合があります。

f:id:piyorinpa:20210107004747p:plain

このことを考慮し、斜め方向に隣り合う要素が交差パーツだったときは領域をマークしないようにします。

f:id:piyorinpa:20210107004758p:plain

よって、ここで説明しているような処理を実装するには、マップ上のマップチップに(何らかの方法で)「境界」と「交差」の情報を持たせる必要があります。

疑似ソースコードを書くと以下のような感じになります。(登場するクラスやメソッドは架空のものです)

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分割して、それぞれにオートタイルの欠片を当てはめます。

f:id:piyorinpa:20210106235027p:plain
マップチップの当てはめ

たとえば上図のように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つの欠片も同様に処理すれば、オートタイルからマップチップを生成できます。

実装してみたようす

このようにして実装した結果、こんなかんじに動くようになりました。

garakuta-toolbox.com

動くとけっこうきもちいい~というきもちになりました。ではでは。

2020年の週末開発ふりかえり

今年ももう終わっちゃうんですね。毎年振り返りをしている のを思い出したので、今年もやっておきます。

あいこんくらぶの店じまい

ドット絵投稿・公開サービス「あいこんくらぶ」を2020/03/01に店じまいしたのでした。それなりに長いこと(3~4年くらい?)運営していたので愛着もあったのですが、管理コストなどを考えてこのようになりました。

Twitterのモーメントに、これまで頑張って宣伝してきた様子とかが残っています。今見ると結構機能もりだくさんだったんだな~となります。

twitter.com

これまでに投稿された作品の一部は、#あいこんくらぶ でも見ることができます。

最終的に、公開/非公開のドット絵を合わせてそれなりの数になっていました。みなさんのドット絵ライフの充実に役立てていたらうれしいです。

ウェブサービスをはじめて店じまいして一番困っているのは、ドメインいつまで持っていようかな問題です。当分は iconclub.jp を保有しているつもりですが、 お金もかかるので難しい。。。 ということで、これから生み出されるかもしれないコンテンツはすべて garakuta-toolbox.com ドメインサブドメインという形で提供していこうと思います。

みんなでつくるダンジョンの開発をひきつづき

開発ペースは落とし気味ではありますが、ひきつづきみんなでつくるダンジョンの開発をしていました。

dungeon.garakuta-toolbox.com

ぜんぜんマップが増えない!という課題があります。一般的なマップエディタと操作性が異なることや、オートタイル系が活躍しそうなマップ作りが大変という事情も 要因の一つと思うので、来年は、マップをつくりやすくする方向のリリースをいくつかしていきたいなと思っています。みんなつかってくれよな!

ぴこぴよv2のリリース

もともとぴこぴよは「あいこんくらぶ」のシステムを流用して作られています。あいこんくらぶの店じまいにあたり、ぴこぴよの機能だけを切り出して 運用していましたが、そろそろシステムを運用しやすいように作り直したいなということで、ぴこぴよ2をリリースしました。 (あと、React触っておきたい~とか、サーバレスなアプリケーションをつくってみたいという技術的興味に対してお手頃な規模感のアプリだったという事情もあります。 フロントはReact、バックエンドはAWS Lambdaをつかって運用しています。)

picopiyo.garakuta-toolbox.com

初代ぴこぴよのリリース時は「Twitter投稿時に、透明ピクセルが存在するとPNG画像がJPEGに圧縮されずに表示される」という特性を利用して、 ドット絵がきれいに投稿できるというアプリでしたが、Twitterの画像圧縮まわりのアルゴリズムも変わり、いまとなってはぴこぴよの存在意義もかなり薄れたなと思っています。

ただ、手軽にドット絵をブラウザ上で加工して投稿できるという利便性はまあまあ有用かもという気持ち(いまのところ)なので、当面は維持運用していこうかなと思っています。

自分用ライブラリを切り出してオープンソースにする業

自分のプロダクトに使うための各種ライブラリは、なるべくオープンソースにしていこうという雰囲気で活動していました。これは、自分のプロダクトが万が一 おしまいになってしまっても、付随する開発を無駄にしない(=アウトプットが0にならない)という戦略に基づくものです。去年からこのようにふるまっていますが、 今年もなるべくこのようにしてきました。

そのほか

みんなでつくるダンジョンは、以下のウェブサービスの2D版です。

もともと、つぶやきのようなウェブサービスをずっと作りたいなと思っていたのですが、やっぱり3Dも扱いたいな~と思い、WebGL触ってみたりなど していました。

あとがき

去年書いた振り返り の「来年はなにやるの?」に書いたことをあまりできてないじゃん!って思いましたが、そういうこともあります。ただ、去年の振り返りにも書いた「ここ最近の3Dの世界にはそこはかとないあこがれがあるので」 というのはずっと持っているお気持ちなので(そういう背景があってWebGL触り始めたというのもある)、ちまちまとそういう知識も入れていこうというのは引き続きの目標です。 一方で、3Dモデリングの世界は、モデリング以外の技術(キャラクターデザインとかとか)に関心が向かず、長続きしないので、あきらめかけている感じ。でも自分のアバターはほしいな~う~ん。

あと、自分の作品をなにかのイベントにだしたい~という気持ちもちょっとあります。これはずっとそういう気持ちを持っているのですが、中の人はとてもシャイなひとなので、 なかなか一歩が踏み出せない~みたいなところがあります。

今年は世情のあれこれもあって、わたしもずいぶんと翻弄されてしまいましたが、来年もひきつづき楽しく開発していきたいな~と思っています。

ではでは。

最近の開発記録(20201117)

こんにちは。最近の開発記録をまとめるなどしました。

見下ろしビューのマップをつくれるようになりました

みんなでつくるダンジョンで見下ろしビューのマップをつくれるようになりました。今まではサイドビューマップしか作れませんでしたが、 こんなかんじのRPGみたいなマップがつくれるようになりました。

f:id:piyorinpa:20201117234452p:plain (このマップの画像はぴぽやさん(https://pipoya.net/ )の素材をお借りしてつくりました)

dungeon.garakuta-toolbox.com

見下ろしビューモードの設定 をすることで、重力が無効になり、十字キーで上下左右に移動できるマップとなります。マップ同士の接続も通常通り行えます。

公開したてなので仕様がちょくちょくかわるかもしれませんが、なにとぞよろしくお願いします。

ちなみに、この機能の公開に当たり、描画速度の最適化なども行っています。ちょっとだけパフォーマンスが向上していると思います。

WebGLをさわりはじめました

3Dっぽい何かを作りたくなり、three.js などを使って何かをつくってみるといいかなと思っていましたが、この際WebGLをちょっとちゃんと触ってみようかなということで最近なんとなく遊んでみています。

https://webglfundamentals.org/ を参考にしながらポチポチすすめています。ようやっとシェーダとかとかが分かってきた感じ。ちょっとくらいであれば 何とかコーディングできるようになったので、箱クラスを定義して、箱をくるくるさせることができるようになりました。

いまのところ、WebGLが難しいというよりかは、線形代数的な知識を思い出すのにちょっと時間がかかる...という感じでしょうか。

f:id:piyorinpa:20201118002045g:plain
くるくる

ソースコードはこちら📝

これを活用して何をつくるかは決めていませんが、何か新しいものが作れるようになればいいなと思っています。

ではでは。

Deviseのアカウント情報をFirebase Authenticationにお引越ししてみる

Railsでログインまわりを実現したいときによくつかうDeviseですが、認証まわりを外部サービスにお引越しするとしたらどうなるのだろうというのをお試ししてみました。 今後ソーシャルログインなどできるようにしたいと思っているのですが、これを機会に認証まわりの処理は外部サービスにお任せするのもあり?という気持ちになっているのでした。

今回は、以下のような条件で認証まわりの面倒を見てくれそうなサービスを選んでみました。

  • Twitterログインに対応していること
  • 趣味程度の利用なら無料枠で収まりそうなプランがあること
  • 既存のアカウントがお引越しできそうな環境があること

ということで、Firebase Authentication を試しに使ってみることにしました。REST APIも充実していそう なので、このへんをつかってサーバサイドでもよしなにできたり、既存の実装に合わせてスムーズに移行できそう?などをもくろんでいます。

firebase.google.com

まずは、ドキュメントに記載されたフォーマットに従い、アカウント情報を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"
}

メールアドレスの検証(サインアップしたら確認メールのリンクを踏まないとアカウントが有効化されない機能)とかとか、必要な機能はそろっているようなので、ためしにいろいろいじってみて、よさそうならお引越しも検討しようと思ったのでした。

認証まわりの機能追加は、セキュリティとの兼ね合いもあってなかなか慎重になってしまうので、信頼できそうな外部サービスにお任せすると気持ち的にも楽ですし。

ではでは~。

ダンジョンの中におみせを出してみました

こんにちは。最近「みんなでつくるダンジョン」に「リンク先遷移機能」を実装しました。こんなかんじに、マップ内からほかのページへと誘導できます。

f:id:piyorinpa:20200905182153g:plain
マップに訪れた人をウェブサイトに誘導できます

この機能については メッセージ表示プラグイン に使い方を載せていますので、気になる方はみてみてください。

話はかわりますが、実は私はじぶんの絵のステッカーを作って使いたいなと思い、こんなお店をこっそり開いていたのでした。

suzuri.jp

こんな感じに使っています。絵の出来はともかくとして、個人的にはそれなりに満足しているわけです。ちなみに貼ってから2年くらい経っていそう。

f:id:piyorinpa:20200905182759j:plain
こんなかんじにつかっています

で、売れるかどうかはともかくとして、マップ内でお店を開くことができたら面白いかもな~とずっと思っていたのですが、今回作った「リンク先遷移機能」をつかえばそれっぽくなるのでは?と思い立ち、 こんなマップをつくってみたのでした。

dungeon.garakuta-toolbox.com

品物の前の看板を「みる」(PCの場合はZキーを押す)と、販売ページにジャンプできるという仕組みです。ちなみに、このマップで売っている物たちは、100円くらいの利益が出るようになっています。

これらのおみせっぽいマップをつなぐための「デパート」マップもつくってみました。

dungeon.garakuta-toolbox.com

このデパートマップ、みなさんのマップも接続することができます。じぶんのおみせマップを接続したうえで、デパートマップ内のサービスカウンタで出店申請をしていただければ、お店への入り口の扉を開けます。 (お試しな試みなので、とくにルールなどは設けていないのですが、お店の扉を開ける前に接続先のおみせのようすを見させていただきたいと思います。ただし、暴力的・性的要素の強いもののデパートマップへの接続は今回はNGとさせていただきます)

f:id:piyorinpa:20200905184848p:plain
サービスカウンタ

たとえば、マップ素材を展示しつつ販売ページに誘導するとか、ゲームのマップの一部をダンジョン上に作ってゲームの販売ページに誘導するとか、そんなかんじで使ってみていただけるといいのかなと思っています。 もちろん、これ以外のつかいかたもOKです。 何かわからないことがあれば @piyorinpa までお気軽にどうぞ。

ではでは~

在宅勤務もこなれてきたのでいろいろまとめてみる

昨今の新型ウイルスのあれやこれやで私自身も在宅勤務が続いているのですが、そういえばもう半年くらいこんなかんじなのか~ということで、私の在宅勤務のようすを記録しておこうかなと思ってこんな記事を書いています。

f:id:piyorinpa:20200825200858p:plain

わたしの在宅勤務環境

f:id:piyorinpa:20200825202126j:plain
わたしの在宅勤務環境

(ちょっと話はそれますが、わたしはいろいろなひとのデスクの画像を見るのがちょっとすきで、インターネット上のそういう画像をたまに眺めたりしています。)

こんなかんじのところで仕事しています。趣味開発もここでしています。もともと趣味開発のための環境(デスクとか椅子とか、各種入力デバイスとかとか)はそれなりに整っていたので、これをおしごとにも対応できるように工夫するなどしています。

概ね以下のような環境になっております。

  • デスクはインターネット通販で随分前に買った幅120cm・奥行60cmのもの。引き出しもついていたけど椅子の肘置きと干渉して邪魔なので取ってしまった
    • 天板のサイズは小さくもなく大きくもない大きさでちょうどよい
  • キーボードはREALFORCE 91UBK、トラックボールELECOMのHUGE(これらは購入後3年くらいは経っていそう)
  • おしごとには会社支給のMacBook Proクラムシェルモードで運用、趣味開発にはWindows機のゲーミングPCを使用
    • 二つのマシンを同じ入力デバイスで運用するので、USB切り替え器をつかってボタン一つで各種入力デバイスがいずれかのマシンに接続されるようになっている(これをつかっている)
    • あたらしいグラボが出たら趣味開発PCを買い替えたい...
  • 中央のディスプレイはDELL U2720Q
    • MacBook ProとUSB TypeC で接続すると充電とディスプレイ接続が同時に行えて便利
    • ディスプレイのオーディオ出力にスピーカーを繋ぎ、Mac機・Win機で同じスピーカーをつかえるようにしている
  • 机の右に置いてある小さめのディスプレイはAmazonで買ったフルHDの中華ディスプレイ
    • 各種音楽配信サービスのプレイヤーとか、おしごと時はSlackとか資料を表示したりしている
    • この小ささが個人的には気に入っている
  • コーヒーを飲むと水ものみたくなるので、コップはふたつ置いておく
  • ヘッドホンはノイズキャンセリングつきのやつ。ノイズキャンセリングが付いているとビデオ会議中の自分の声が気にならない気がするので重宝している
  • Macがとても熱くなるので部屋の唯一のデスクファンをMacBook Proに奪われている
  • 椅子はこれ をつかっている
    • なぜか黄緑色だけめちゃ安かったので、というそれだけの理由で買ったやつ。だけど、ロッキング機構とか肘置きとかはちゃんとついてる
    • 在宅ワーカーは椅子にこだわるべき、という話はよく聞くので高級いすに興味はあるけどなかなか勇気がでない
  • 複雑なことは絵に描かないと理解できない性分なので持ち運びできるホワイトボード nu board をずっと愛用している
  • 画面下にウェブカメラがあるけど位置が気に入らない

よさそうポイント

  • 在宅勤務環境をアップデートする == 趣味開発環境がアップデートされるのでお得感がある

イマイチポイント

  • ウェブカメラの位置が「下から見上げる」形になるので、こういうかんじの映り方をしてしまう

    f:id:piyorinpa:20200825000448p:plain
    ウェブカメラのようす(イメージ)

  • 趣味も仕事も同じ場所で行うので気分転換が至難の業

    • 業務が終わる -> すぐに趣味開発へ、という気持ちになりづらい
    • 趣味開発の場所と仕事の場所を分けると各種開発環境もそれぞれ用意しないとなのでコスパがだめになる

在宅勤務のよいところ

私が感じるよいところは概ね以下の通りです。だいたい世間で言われているようなメリットをわたしも感じています。

  • 通勤時間が無くなったことで通勤時間分がそのまま自由時間として開放された
    • 電車に乗らないとこんなに疲れないのか!という気持ちになる
  • 朝ごはんがゆっくり食べられる
  • 自宅~会社との物理的距離がある程度遠くても困らない
    • 住宅にかかる費用を抑えることができる可能性が高まった
  • 仕事中にスピーカーから好きな音楽やラジオを流せる
    • オフィスに通勤していた時はヘッドホンをつかっていたけど、耳がつかれるのでスピーカーのほうがよい
  • 空調の温度を自由に設定できる
    • これは夏の暑い時期などに地味にうれしいポイント。空調の位置や温度設定を気にしなくてよいのはとてもよい

私はとても心配性なので、このご時世下だと、わずかでも体調に違和感が...となったときは出社をすごくためらうことになるし、体調を悪くできないというプレッシャーで体調を壊しそうと思うので、諸々落ち着くまでは在宅勤務はありがたい、という気持ちです(たぶんこれが現在の状況下における個人的在宅勤務最大のメリット)。

(わたしの状況下での)在宅勤務に関する課題

(少なくとも私自身の)在宅勤務に関する課題はこんなかんじです。

  • いままで気にしなかった住環境の問題
    • 文字通り家に「ずっと」いるので、今まで気にならなかったいろいろなことが気になりだす
    • 集合住宅に住んでいるので周りの生活音が以前に比べてすごく気になるようになってしまった(隣の人が大きな声でしゃべっていると、会話の内容はわからないけどしゃべっている雰囲気が壁から伝わってくるとか)
    • (わたしの勤務体系が大きく変わったことでライフスタイルの変化があったのと同じように)隣近所のライフスタイルによる変化と思われる音問題にまいって引っ越しをするなどした
    • 同じような問題が起きないように配慮して引っ越しをしたことである程度改善されたけど、周囲の小さな物音などにびくびくするようになってしまったし、部屋でしゃべるときは小声になる癖がついてしまった(とてもこまっている)
  • 「外に出よう」という強い気持ちがないと外に出なくなる
    • ずっと家にこもっているとメンタルがダメになってしまう大きな原因になりそう(経験談)なので、生活の決まった流れに「外に出る」という課題を強い気持ちで追加する必要がある
    • たまにはお昼ご飯をお弁当にすることで、昼ごはんの調達先開拓を外出のきっかけにするとかもあり
  • 慣れないテレビ会議
    • テレビ会議は間がむずかしかったり(ほかの人と自分の発言がかぶってしまう、とか)、相手のようす(表情とか雰囲気とか)がわかりづらいので、少ない情報量の中で行間を読み始めてしまい、勝手に落ち込むことも。
    • カメラをONにしてもらうなど、情報量を増やすことでだいぶ改善された感。カメラONにできない人向けのバーチャルアバター表示機能とかほしいかも(そういうものがあるだけでもずいぶん違うと思う)。カメラ越しにリアクションをもらえると一人でしゃべっている感が軽減されてなおよい。

あらゆる物事がいままでと異なるので、とにかくメンタルの健康を意識的に保つようにしなければならないという気持ちがあります(性格的な要素が強く出そうなところですが)。通勤していると、移動による視覚的な刺激とか適度な運動が自動的に得られますが、在宅勤務下だとこれらを意識的に行う必要があると感じました。 この「意識的に」というのが案外難しいのですが、いろいろと試してわかりかけ始めていそうな気配があります。

まとめ

この状況下における在宅勤務はとてもありがたいので、落ち着くまではこの体制が続くととてもよいと思う一方で、たまにはオフィスに出社したいなという気持ちがあります。状況が落ち着いたら週1回程度はオフィスに出社したい、くらいの気持ちなのでした。たまに出社することで適度な刺激が自動的に得られるのではと期待しているのですが、ずっとオフィスで / ずっと自宅で、という環境よりもより楽しく働けるのかなと思っています。

ではでは。

あらためてみんなでつくるダンジョンの紹介をば

こんにちは。実は公開から1年経っている「みんなでつくるダンジョン」ですが(公開日は2019/4/27)、最近は細かいところに手を入れたりしています。パラメータ調整でキャラクタの動きを操作しやすくしたりとかとか。 公開からだいぶたったということで、改めてどんなものになったのか?という点をご紹介したい~ということでこの記事を書いています(公開当初から機能もだいぶ増えたので、あらためてそのあたりも整理しながら書いていきます)。

みんなでつくるダンジョンってなに?

アクションゲームのようなマップをつくることができます。つくったマップ上をたんけんしたり、他のマップとつなげて行き来できたりします。 (この辺の説明は 公開当初の記事 からあまり変わりありません)

マップをつくったり

f:id:piyorinpa:20200819221747p:plain
こんな感じのマップがつくれます

じぶんで用意した画像などの素材をつかったり、他の方が公開している素材を利用してアニメーションを作ったり、壁などのパーツを配置してマップをつくっていきます。

(1MB以内のPNG画像を30枚まで登録できます。いわゆるマップチップ・タイルセットと呼ばれる形式の画像があるとつくりやすいですが、必ずしもこれらの形式である必要はありません。 くわしくは 📚ヘルプ を参照してください。)

はじめてマップをつくるときは、公式素材を活用してアニメーションをつくってみるといいかもです。マップ作りに向いている素材を確認してみてください。(とりあえず📚チュートリアル とか、📚つくりかた動画 をみるとよいかもです)

また、マップ上に配置した「パーツ」に動きを与えたりできる「プラグイン」という仕組みを使うと、ちょっとしたゲームっぽくできます。例えば以下のようなマップがつくれます。

ちなみに、PC・スマートフォンいずれのデバイスでもマップをつくったりあそんだりできるので、じぶんのマップをどこにいてもお手入れできます。

2MB以内のoggファイルをアップロードすることができ、マップのBGMとしてつかうことができます。

マップを公開したり

つくったマップを「公開」状態にしておくと、マップ毎にURLが発行されるので、これをつかえばブログやSNSでマップを共有できます。たとえばこんなかんじ。

「この画像素材を使うとこんなマップがつくれます」みたいなデモ用途でつかったりするのもいいかもですね。みんなでつくるダンジョンはドット絵に比較的優しい(拡大してもドットがぼやけない)ので、ドット絵を良い感じに見せるための、展示場のようなマップをつくってみてもいいかもしれません。

マップをつなげたり

「コネクタ」と呼ばれるワープ地点のようなものを使うとほかのマップと接続することができます(ほかのマップにワープできるようになる)。じぶんでつくったマップをたくさんつなげればより広い世界をつくることができます。

たとえば、以下のマップに入ってみると、マップの端などに矢印マークが見えますが、これがコネクタです。触れると設定したマップに移動できます。 dungeon.garakuta-toolbox.com

f:id:piyorinpa:20200819225320p:plain
画面左にあるやじるしが「コネクタ」

また、ほかのひとが公開している「コネクタ」とも接続できるので、みんなでつくるダンジョン内の世界にマップを参加させることもできます。マップ同士のつながりは ワールドマップ でみることができます。

f:id:piyorinpa:20200819224516p:plain
マップ同士のつながり

マップをたんけんしたり

コネクタでつながれたマップをたんけんしてみるのもよいです。後述する「アイテム」をあつめたり、マップによっては「いいね」ができるパーツが設置されていることもあるので、いいなとおもったら「いいね」してみましょう。(📚いいねカウンタの設置方法はこちら

f:id:piyorinpa:20200820232036p:plain
ハートマークに触れるといいねできます(要ログイン)

(マップの製作者さんへリアクションを届けるいい感じの仕組みをもう少し用意したいなと思っているのですが、何かいいアイデアがあったらおしえてください)

アイテムをつくったり

「アイテム」をひろったり、ひろえる「アイテム」を設置したりできます。ひろったアイテムは眺めたり、場合によっては使うことができます。 (プラグインを駆使すると、アイテムをつかったときに起きる動作をつくることができるので、マップ作りに興味のある方はぜひに。くわしくは📚ヘルプ を見てみてください)

f:id:piyorinpa:20200819222842p:plain
アイテムをひろうと

f:id:piyorinpa:20200819222949p:plain
アイテム一覧でながめたり使ったりできます

まとめ

というわけで、「マップをつくって・つなげて・あそぶ」ことができるウェブサービスなのでした。もっとマップが増えるとたのしいなと思うので、ゲームっぽい画像素材をお持ちの方だったり、とりあえずマップをつくってみたいぞという方はぜひとりあえずマップをつくってみてください。画像素材もまだ少ないですが、他のユーザーの方々に登録いただいているものを(一定条件の下で)つかうことができます。(登録されている素材を確認してみる

ではではー