ドット絵をきれいに表示できる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)

これ系のタイトルでブログ書くの久々だな...という気持ちになりましたが、開発の記録をブログ記事にしてなかったということか...。

というわけで、ひさびさに開発報告をばをば。

みんなでつくるダンジョンに「アイテム取得機能」がついたよ

みんなでつくるダンジョンで、アイテムをつくったり、アイテムを集めることができるようになりました。

f:id:piyorinpa:20200416214532g:plain
鍵をひろってみるよ

(墨cmさんにお借りしているマップチップに加え、 @u_ron_tya さんから背景画像をお借りしています。この背景画像は公式素材として提供しているので、使ってみたいという方はぜひに~)

マップ上にアイテムを置いたり、マップを訪れたひとに拾ってもらうことができます。プラグインを活用すれば、拾ったアイテムをつかってドアをあける、などのギミックをつくることもできます。

ログインした状態で以下のマップに訪れると、アイテムをひろってみることができます。 dungeon.garakuta-toolbox.com

くわしくは📚ヘルプ を見てみてください。

じつは、みんなでつくるダンジョンに関してはそのほかにも、トップページをちょっとだけ変えたり、マップ作成画面の各所に解説を入れたりと、ちまちまと手を入れていたりします。

Gamepadべんりライブラリを作っているよ

以前の記事 でブラウザからゲームパッドをつかうためのべんりプログラムを書いてみたのですが、これをnpmパッケージとして提供すべく準備しています。とりあえず最低限のテストコードを用意していいかんじに動くようになったので、あとはわたしのやる気次第...。

いつも名前を付けるときにだいぶ悩むわけですが、いまのところ「ぴこぴこぱっど」で行こうと思っています。

github.com

3Dアバターの作成周り

もうず~~っと「つくりなおします」といい続けてはやNか月...。みたいになってしまっていたのですが、なんとなく形になりました。口や目は動かないけど、まあなんとかそれっぽくはなったかなという雰囲気です。今回は等身をちゃんと考えてつくったつもりなので、以前のモデルみたいに「なんか着ぐるみみたい..」という違和感は感じないはず、だと思いたいです。

そのほか

昨今のあれやこれやですっかり自宅にいる時間が長いわけですが、そのせいなのかどうかはわからないけど、最近やる気スイッチが壊れかけているのでした。ひとりごとでもいいからぶつぶつ言いながら作業するのはどうか、ということで、(Discordをなんとなくつかってみたいということもあり)Discordのサーバ を立ち上げて、ここで独り言を言いながら作業するという試みをしてみています(テキストチャットのみ)。とりあえず飽きるまではやってみるつもり。なんとなく気になる方や、開発状況をなんとなく見たい方などがもしいれば、お気軽に入ってみてください(あいさつとかも不要ですし、話しかけてもらってももらわなくてもどっちでもよいです。わたしもそのへんはテキトーなのでした)。

ではでは~。

ややおてがるなプロジェクタを買ってみた

このご時世でなかなか外出できず、家で楽しく過ごしたいな~という気持ちになりながらインターネットを回遊していると、最近はお安いプロジェクタがちらほらあるという情報にたどり着きました。

Amazonで検索すると、ほんとうにお安いものだと1万円を切る価格、フルHDの解像度があるものでも2万円台で買えるということでなんとなく興味を持ち始めて...。というかんじで色々調べているうちに欲しくなり、 最終的には以下の製品を買ってみたのでした。

aladdin.popin.cc

XGIMI社のZ6 Polar という製品に、シーリングライト付きプロジェクタで有名な「popin Aladdin」のOSを搭載したという感じのもののようです。 いわゆる「中華プロジェクタ」よりはやや高めの価格ですが、小型でフルHDの割にはそこそこ明るさがありそうで、かつ搭載されているOSが優秀そうということで購入してみました。(ちょっと前に割引セールをつかって購入しましたが、この記事を書いているときも別のキャンペーンで割引セールしていたので、そういうタイミングを狙ったほうがよいのかも)

f:id:piyorinpa:20200405170731j:plain:w600
三脚に取り付けて運用中

本体底面には三脚用のネジ穴があるので、こんなかんじに三脚に取り付けて運用しています。当初は壁面の棚に置こうと思ったのですが、思ったよりも投影される映像が大きくなり、他の家具が邪魔をしてしまう...というかんじになってしまいました。案外家具の置かれていない壁を作るのって難しい...。

f:id:piyorinpa:20200405171138j:plain:w600
とりあえずゲームしてみている
とりあえずPCとHDMIで接続してゲームをしてみているようす。よさそう。

部屋がそこそこ暗ければちゃんと楽しめそうです。真っ暗だとなおよし。ちなみにでこぼこした白い壁紙に直接投影していますが、気にする人はデコボコがきになるかも、という程度で、映像に集中していればそんなに気にならないかなという雰囲気です。でも、たぶんスクリーンに映したほうがもっときれいにはなりそうです。(とはいえスクリーンを設置するのは結構労力必要そうだし、当面は壁面に直接投影する運用にするつもり)

ちなみに、YouTubeなどはプロジェクタ内のアプリで見られますが(別途インストールが必要)、わたしがよくつかっているdアニメストアは対応していないっぽさそうで、ふだんはChromecastをつかって各種動画配信サービスを楽しんでいます。

ひとつ難点を挙げるとすると、台形補正を利用するとフレームレートが下がるらしく、台形補正をかけた状態でゲームをプレイしてみたら無視できないほどカクカクしているように見えました。大画面なのでフレームレートが低い状態でゲームをすると酔ってしまうかも。なので、フレームレートが重要そうな映像を映すときには、基本的には投影面と平行に設置することが望ましそうです(台形補正をかけていても、私の場合は映画やアニメの視聴には違和感を感じませんでした)。

このような、今まで買ったことのないような部類の製品を買うときは、ネットでいろいろ調べてから買うのですが、ちょっとだけプロジェクタのこともくわしくなった気がするのでそういう過程もたのしかったかも。

実は購入後に初期不良で交換対応してもらっていたこともあり、本格的に使うのはこれからというかんじなのですが、これで自宅生活がよりよくなるといいなという気持ちです。 ではでは。

Gamepad APIであそんでみる

ウェブブラウザでゲームパッド(いわゆるゲームのコントローラ)が使えたらいいなと思っていたら、Gamepad APIなるものがあることを知りました。 developer.mozilla.org

ということでつかってみます。Gamepad APIの使い方は、上記の記事がわかりやすいです。

遊んでみた結果はこちら。ゲームパッドの操作の状態を表示します。また、ゲームパッドのボタンのマッピング(たとえば、Aボタンが押されたらジャンプする、のような関係)を変更したりできます。 garakuta-toolbox.com

ソースコードはこちら github.com

Gamepad API単体では、あるタイミングでのボタンやジョイスティックの状態を取得できます。しかし、ボタンの押下状態の変化(ボタンが押された→離された、など)を検知するには、別途実装が必要のようです。 また、(おそらく)ゲームパッドによってボタンの配置が異なったりすることから、実用的に使うにはボタンのマッピングが簡単にできる必要がありそうです(少なくとも、W3Cのドキュメントに記載があるSTANDARD GAMEPADと、私が持っているゲームパッドでは微妙にボタンの配置が異なりました)。

ということで、このあたりの実装をしてみたのでした。今回はお試し的に実装してみましたが、ライブラリとして公開できるように作ったつもりになっているので、今後はnpmで公開できるようにして、わたしの製作物のあれこれに使おうかなと思っています。みんなでつくるダンジョンでゲームパッドが使えるようになるかも~。

ではでは。

GitHub ActionsをつかってVuePress製ページを Github Pagesで公開してみる

GitHub Actions気になっていたけど使うチャンスがない...。と思っていたのですが、そういえばみんなでつくるダンジョンのドキュメントはVuePressでつくっていて、GitHubにPublic Repositoryとして存在していて、かつGitHub Pagesで公開していたのだった~ということを思い出しました。

今までは、VuePressのDeployingにある案内に倣って、お手元でシェルスクリプトを実行して公開する形をとっていたのですが、GitHub ActionsをつかってmasterブランチにPushされたときに自動でビルドし、公開されるようにしました。

今回作業したドキュメントのリポジトリはこちら。 github.com

このActionsをつかえばやりたいことができそう~ということで、これをつかいます。(ドキュメントが詳しく書いてあって分かりやすい!) github.com

概ね上記ページの Static Site Generators with Node.js の項のとおりのymlを置けばよさそうです。 VuePressのビルド済みページは ./docs/.vuepress/dist に生成されるので、 publish_dir の値は ./docs/.vuepress/dist になります。

GITHUB_TOKEN ってなんだろう...と思ったら、Action内でつかえる Personal Access Token みたいなものを自動的に生成してくれているのですね。(GitHubのドキュメントより

最終的に定義したワークフローはこちら。こんなかんじのymlを置くだけで、CIやCDがかんたんにセットアップできるのはとっても便利~。 minnade-dungeon-docs/publish.yml at master · piyoppi/minnade-dungeon-docs · GitHub

ということで、これでmasterブランチにPushされたらドキュメントが自動で更新されるようになりました。みんなでつくるダンジョンのドキュメントのここがおかしい!などがあれば、直接 @piyorinpa までご連絡いただいてもいいですし、Issueを立てていただいてもいいですし、マークダウン書けるぞ!という方はPull Requestをお待ちしております。

ではでは~。

【あいこんくらぶ】サービス終了のお知らせ

ドット絵投稿・公開サービス「あいこんくらぶ」の提供を終了することにいたしました。

今後のスケジュール

  • 2020/01/17 以降、会員登録の受付を終了します。
  • 2020/3/1 中にサービスを完全に終了します。

アップロード済みのドット絵や会員情報は、サービス終了後にすべて削除いたしますので、ダウンロードを忘れないようにご注意ください。

サービス終了に至る経緯

あいこんくらぶは「ドット絵をブラウザで描いて公開できる」サービスとして、2015/06 ごろにサービスを開始しました。 いろいろな機能をリリースして楽しく開発を行っておりましたが、公開されているドット絵がなかなか増えないことや、 訪問者数の減少がお悩みポイントでした。このような状況に加え、公開からそろそろ5年経つということもあり、サービスを維持するよりもその労力をほかの開発に回したほうが よさそうと判断し、このように決めました。

ウェブサービスはその性質上、開発したものをほったらかしておくことが難しいので、維持するための活動をしなければならないのです)

私はドット絵を描くのも見るのも好きなので、せっかくつくったこのようなサービスを閉じることは大変心苦しい気持ちもあるのですが、 「なかなか使ってもらえない~」というお悩みをずっと抱えるよりは、ほかにもっと面白いものをつくったほうがいいかも...と思っています。

繰り返しになりますが、あいこんくらぶに存在するデータはサービス終了とともにすべて削除しますので、お手元にデータがない場合はダウンロードをお忘れなきようお願いいたします。

いままであいこんくらぶをご利用いただき、ありがとうございました。

開発の記録(20200113)

新年初投稿をばをば。年末年始のお休みとかにはこんなことをしていました。

みんなでつくるダンジョンまわり

ワールドマップ

ワールドマップを公開しました。接続されているマップたちをグラフ構造で表示します。 https://dungeon.garakuta-toolbox.com/world

f:id:piyorinpa:20200113213008p:plain
ワールドマップ

ワールドマップのオレンジ色の〇は「公開されているマップ」を表しています。クリックすることで、そのマップへ移動することもできます。 マップをつくってつなげるほど地図が大きくなるはずなので、つくったマップはぜひ他のマップとつなげてみてください。(いっぱいつながるとワールドマップも楽しい感じになりそう...と思っています)

画像素材の共有まわり

公開した画像素材をブログやSNSなどで共有できるようになりました。くわしくは以下のページをご覧ください。 garakuta-toolbox.com

素材がないとマップ作りの敷居が高い~ということがずっと課題なので、画像素材の公開まわりをすこし整備していきたいなと思ったのでした。

電子工作を再開しました

f:id:piyorinpa:20200113214529j:plain
なにかやっていそうな机の上

年末に「今年は電子工作を再開します」とブログに書いたので、さっそくはじめました。

上の画像は、圧電素子をつかった振動センサの試作のようすです。圧電素子を振動させたときに発生する電圧をオペアンプで増幅し、コンパレータにかけるところまでをお試ししているところ。

最終的にはワンチップマイコンと組み合わせて、おもちゃをつくろうとなんとなく思っています。

ところで、画像左端に映っているのは以下のURLで紹介されていた簡易オシロスコープです。これをやりたくなったときに、さすがに波形が見られないとつらぽん、ということで購入してみました。これくらいの用途なら概ね使えるかもという雰囲気です。とはいえ、やっぱり2チャンネルはほしいな~とか、いろいろ欲が出始めている...。

pc.watch.impress.co.jp

ではでは~。ことしもよろしくお願いします。