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

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

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
アイテム一覧でながめたり使ったりできます

まとめ

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

ではではー

みんなでつくるダンジョンで大きなマップをつくれるようになったよ

おひさしぶりです。生活まわりでいろいろあり、最近全然開発できていなかったのでブログの更新もすっかりご無沙汰になっていました(みたいなことを6月あたりにも言っていたけど、いろいろとむずかしく、なかなか本調子にならないのだ。)

ひきつづきちょっとずつやってゆくのでよろしくお願いします。

みんなでつくるダンジョンで大きなマップをつくれるように

いままではマップの最大面積が1500×1500pxという制約がありましたが、これを 3200×3200px に緩和しました(この対応にあたり、描画負荷の調整などを行っています)。 また、マップに設置できるパーツ数も100から150まで増やしました。 以下の画像が目一杯大きなマップをつくってみた様子です(マップチップの大きさは32px四方)。

f:id:piyorinpa:20200814182917p:plain
3200px四方のマップ

上記マップは以下から遊ぶことができます

dungeon.garakuta-toolbox.com

「最大面積」の制約なので、たとえば高さを小さめにとれば、そのぶん幅を大きく取ることができます。

ちなみに、以下の画像が概ね今までのマップの最大面積1500×1500pxに近いマップのようすです(マップチップの制約があり、厳密には1440px四方)。これと見比べると、大きくなったな~感が伝わるでしょうか。

f:id:piyorinpa:20200814183420p:plain
いままでの最大面積めいっぱいつかったマップ

というわけで、ひさびさの開発報告でした。ゆるりとやっていきますが、ご要望などあればツイッターなどなどでお声掛けください。

ではでは~

開発の記録(ぴこぴよにいくつかの機能を追加しました)

この間公開したぴこぴよv2にいくつかの機能を追加しました。

余白なし画像の投稿機能

余白のない画像を投稿できるようになりました。余白を付けると、下図左側のようにツイッターのサムネイル画像の大きさに概ね一致するような画像が生成されますが、下図右側のように(これまでのぴこぴよのように)セットした画像に合わせた画像サイズで 投稿できるようになりました。

f:id:piyorinpa:20200622222513p:plain
余白をつけないときとつけるとき

パレットつき画像の投稿機能

セットした画像に含まれる色を抽出した色パレットをいっしょに投稿できるようになりました。実験的な機能なので、今後ちまちまと仕様を変えたりするかもしれませんが、よければつかってみてください。

f:id:piyorinpa:20200622223335p:plain
パレットの表示

これで、これまでのぴこぴよでできたことはv2でも概ねできるようになったかな、という雰囲気です。ぴこぴよv2に関しては今後もちまちまと手を入れるかもしれないですが、 これまでのぴこぴよは近い将来に廃止されるのでご注意ください。

ではでは。

ぴこぴよv2を試験的に公開しました

だいぶご無沙汰でしたが、個人的なあれやこれやがありちょっと開発をお休みしていました。いまは細々と週末開発を再開し始めています。

そして、突然ですが「ぴこぴよ」(ドット絵ツイート支援サービス)を全面的に作り直したv2版を試験的に公開しました。

しばらく新旧ぴこぴよを並行運用し、近い将来のうちに「これまでのぴこぴよ」は廃止します。(廃止に伴い、Mastodonへの投稿機能の提供を終了します)

ぴこぴよってなんだっけ

改めましてぴこぴよの簡単な紹介をば。ドット絵をきれいに(アンチエイリアスをかけず、エッジがつぶれたりぼやけたりしないように)拡大してTwitterに投稿できるウェブサービスです。#picopiyoの検索結果をみてみる

ドット絵はその性質上、拡大して見せたり、または原寸大で見せたりしたくなるので(個人の感想です)、異なる倍率のドット絵を並べた画像も投稿できます。

f:id:piyorinpa:20200610213046p:plain
こんな感じの画像を投稿できます

あたらしいぴこぴよの機能

基本的には今までのぴこぴよとかわりませんが、微妙に機能が追加されていたりします。

たとえば、ならべて表示する画像の位置を調整できるようになりました。ほかにも、画像の並べ方(上下・左右・中央揃えなど)のバリエーションが増えています。

f:id:piyorinpa:20200610213521g:plain
動くぞ...!

また、これまでのぴこぴよと異なり、最終的に投稿される画像の大きさが固定となるようにしてみています(この仕様は反応を見て調整をしようかなと思っています)。編集画面の枠内のとおりの画像がTwitterに投稿されるようになっています。

f:id:piyorinpa:20200610214127p:plain
編集時の見た目そのままが投稿されるようになりました

今後もパレット画像の添付機能など、機能拡張ができるといいなと思っているので、使ってみた感想などをぜひツイッター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>

なにかつかえそうなものを作ってみたくなり、とりあえず公開してみたのでした。自分でも実際に使ってみて、適宜改善していこう~という気持ち。

ではでは~。