2019-01-14

開発記録（ぴこぴよのお手入れとみんなでつくるダンジョン進捗）

みんなでつくるダンジョン製作報告

いつもの開発報告をばをば。

みんなでつくるダンジョンのもろもろ

年明け前から今までに、そこそこ進められたぞ！という気持ちです。

カメラ移動まわりの調整

前回のブログ記事の内容を実装しました。カメラがぬるぬる動くようになって楽しくなったぞ！

garakuta-toolbox.hatenablog.com

リフトプラグインの調整

キャラクターが乗って移動できるリフトを作れるプラグインを実装しました。実はこのプラグインを作っているときに、カメラ移動が怪しい（ブレブレする）ので「カメラ移動周りの調整」をしたのでした。だいぶアクションゲームっぽいダンジョンが作れる雰囲気が出てきたのでは？（みんなでつくるダンジョンはいわゆる「ゲーム」ではありません。あくまでみんなが作ったマップを渡り歩けるものみたいなイメージ。）

f:id:piyorinpa:20190114223124g:plain:w500 — これで移動も自由自在～

こういう「リフトが発生する力によってほかのキャラクターやアイテムを動かす」というのは（今回の実装方法だと）ちょいと複雑で、難航したけど何とかできてよかった。。。

足場プラグインの実装

アクションゲームでよくある「片方向には通行できる足場や壁」をつくれるプラグインを実装しました。こんなかんじ。これでマップに迷路要素を付けることができたかな、という気持ちです。

f:id:piyorinpa:20190114222555g:plain:w500 — 下から上へは通行できる足場

右往左往するキャラクタープラグインの実装

右往左往するキャラクターをつくれるプラグインを実装しました。テキスト表示プラグインと組み合わせるとたのしそう。（キャラクターに話しかけるとキャラが一時停止するようになっています）

f:id:piyorinpa:20190114223105g:plain:w500 — 右往左往しているメイドさん

それにしても、てくてくうごくメイドさんかわいいなぁ。。。（素材提供いただいている墨cmさんありがとうございました～！）

ベータテストで報告いただいた不具合の修正

先日一区切りしたベータテストでたくさん報告いただけたので、一つずつ直したりしていました。まだちょっと残っているけど概ねよさそうという雰囲気です（ご協力いただきありがとうございました）。

ぴこぴよに「よくつかうハッシュタグ」の挿入機能を追加

ドット絵をTwitterに投稿するとき、しばしば「#ドット絵」「#pixelart」ハッシュタグが用いられますが、この2つのハッシュタグをボタンひとつで挿入できる機能を付けました。

f:id:piyorinpa:20190114221119p:plain:w500 — 投稿するときにハッシュタグを挿入できるよ！

ユーザーさんからのご要望により追加した機能ですが、たまーにハッシュタグの付与に失敗しているツイート（スペースの有無や微妙な文字の違いなどによるもの）を見かけていたので、この機能を活用して確実にハッシュタグを付与して投稿できるかなと思っております。ぜひご活用ください。

まとめ

年末年始のお休みや連休で、それなりに開発が進められてよかったなぁという気持ちです。みんなでつくるダンジョンはなんとか春先ごろにオープンベータとして出せるといいなぁ。とはいえ、「じぶんの3Dアバターがほしい」とか、「あのツールをつくりたい」とか、やり切れていないところもあるのでした。時間の使い方は難しい。。。

ではではー

2019-01-06

カメラ移動をばねっぽくしてみた

みんなでつくるダンジョン製作報告プログラミング

みんなでつくるダンジョンでは、キャラクターを画面中央に表示するようにカメラ座標を決定しています。

今まではキャラクターの位置を以下のように決定していましたが、キャラクターのうごきががくがくするとカメラまでがくがくと動くようになり、画面酔いをしやすくなりそう～という懸念がありました。

camera.x = character.x + (character.width / 2) - (screenWidth / 2);
camera.y = character.y + (character.height / 2) - (screenHeight / 2);

f:id:piyorinpa:20190106135607p:plain — カメラ位置とキャラクター位置の関係

そこで、カメラとキャラクターをばねでつないで描画する仕組みに変更してみました。キャラクターが移動するとばねが引っ張られるのでカメラがゆるやかに遅れて動きます。

f:id:piyorinpa:20190106191504p:plain — キャラクターとカメラをばねでつなぐ

カメラの重さを $m$ , カメラの加速度を $\ddot{x}$ , ばね定数 $k$ , ばねの伸び $k_x$ とすると力のつり合い式を $k x_k - m\ddot{x} = 0$ みたいにかけるので、カメラの加速度は $\ddot{x} = \frac{k}{m}x_k$ で計算できます。カメラの速度 $\dot{x} = \int \frac{k}{m}x_k dt = \frac{k}{m}tx_k + C_1$ 、カメラの速度 $\dot{x}=0$ のときばねの伸び $x_k=0$ なので、積分定数 $C_1 = 0$ となります（あっているかな...）。

$k, m, t$ （フレーム間隔を一定とする）はいずれも定数なので $\frac{kt}{m}=C$ と置けば $\dot{x} = Cx_k$ と書けます。（ $C$ はばね定数と質量で決定される定数）

カメラ位置を $x_c$ , キャラクタ位置を $x_a$ とすれば $x_k = x_a - x_c - x_o$ なので、最終的には

$\dot{x} = C ( x_a - x_c - x_o )$ となります。（y方向も同様に、 $\dot{y} = C ( y_a - y_c - y_o )$ とします。）

$C$ の値を適当に（1以下に）設定すれば、カメラの動き具合を調整することができます。計算した速度は1フレームあたりのカメラ座標の移動量とみなせるので、1フレームごとに速度を計算してカメラ位置 $x_c$ に足していきます。

$x_c = x_c + \dot{x}$ 　（y方向も同様に、 $y_c = y_c + \dot{y}$ とします。）

上記のようにカメラを動かすと以下のようなかんじになります。

カメラを追尾したい対象とばねで繋ぐ実装にしておくと、たとえばばねを他のキャラクターに繋ぎ変えれば、特に何も考えなくてもスムーズに繋ぎ変えた先のキャラクターを見るように移動するのでよいなあという感じです。視点移動とかもらくらくにできそう。

ではでは～。

2018-12-25

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

雑記

去年の週末開発ふりかえりはこちら -> 2017年の週末開発ふりかえり - がらくたツールボックスのウェブログ

こんにちはこんにちは。今年もそろそろ年があけてしまいそうなので、今年の週末開発がどんな感じだったかをまとめておこうと思ったのでした。

だいたい以下のことをしました。（順不同）

がらくたツールボックスのウェブページの公開
みんなでつくるダンジョンの開発
既存アプリケーションのメンテナンス

がらくたツールボックスのウェブページの公開

f:id:piyorinpa:20180131235049g:plain:w600 — がらくたツールボックスのウェブページ

がらくたツールボックスのウェブページの公開を去年の年の初めに行いました。これをつくってもう1年経つという事実にやや衝撃を受けています。1年はあっという間だ...。

garakuta-toolbox.com

変わったサイトにしたいなーという気持ちで、古めのWindowsみたいな見た目のウェブサイトをつくりました。サイト内で表示されるウインドウはマウスで動かせたり、ページ内の操作とブラウザの戻る・進む機能がリンクしていたりと、地味に凝った作りにしています。ただ、スマホ対応するつもりだったけど、こんな感じの変わったサイトにした関係でスマホの小さい画面にうまく最適化するのが難しく、やや放置気味になってしまったのが反省点です。

もう1年経つし、これはこれでアーカイブしておいてメンテしやすいウェブサイトを改めて作るのも悪くないかもなーと思っています。

みんなでつくるダンジョンの開発

f:id:piyorinpa:20181225225455p:plain:w600 — みんなでつくるダンジョン

今年のメインはこれ！という程度にはちまちまと手を入れていたのが「みんなでつくるダンジョン」です。

dungeon.garakuta-toolbox.com

今年の初めごろのコミットログを見てみると、どうやら画像アップロード機能周りを作っていたみたいです。このころは、なんとなくステージがつくれて、なんとなくアニメーションがつくれて、みたいな完成度だったのですが、今年中になんとかランディングページを公開したり、クローズドベータテストにこぎつけることができました。（ご協力いただいている方々には感謝です）

諸般の事情で3か月くらい全く開発が進まなかった時期があり、1年くらいで完成できればという当初の目算が崩れてしまったのでした。諸般の事情は現在も抱えているものの、ちまちまと開発を続けて、来年の3月、4月には公開したいなぁという気持ちです。

既存アプリケーションのメンテナンス

あいこんくらぶやぴこぴよの見えない部分のメンテナンスをしていました。大きな仕様変更はないものの、Twitterの仕様変更対応など、アプリケーションを継続的に公開するためのもろもろを裏側でこそこそしていました。

まとめ

今年は新しいアプリケーションの作成をメインで取り組んでいたので、週末開発はたのしいけど、なかなか公開できないために反響が得られず、ときどき心が折れそうになるという状況を久々に感じたりしながら作っていました。このブログは「なかなか公開できないために～」の部分を、開発記録や技術的なあれこれを公開することで補う目的があるので、来年もちらちらと見に来ていただけるとうれしいです。

ではでは～。

2018-12-18

PixiJSのTiling Spriteの描画がうまくいかないので試行錯誤したよ

プログラミング JavaScript

「みんなでつくるダンジョン」ではPixiJSを活用してWebGLな描画をしています。ただいまパフォーマンスチューニングをしており、この一環として画像を並べて表示するための処理を、指定したテクスチャを繰り返し表示することができるTilingSpriteに置き換えることにしました。

TilingSpriteのデモはこんなかんじ。 https://pixijs.io/examples/#/basics/tiling-sprite.js

しかし、以下の画像のように黄色いブロックのつなぎ目がちゃんと表示されたり、ふちの描画がうまくいかなかったりします。どうやら黄色いブロックを移動すると、期待する通りに描画されたりされなかったりするようです。

f:id:piyorinpa:20181218224050p:plain — 左：ちゃんと表示されている様子　右：ふちの描画がうまくいっていない様子

この黄色いチップは、以下の画像のように1枚の大きなテクスチャ画像の一部です。

f:id:piyorinpa:20181218224651p:plain — マップチップ画像

黄色いブロックを描画するときは画像の一部分を切り出して表示しています。プログラムの雰囲気は以下のような感じ。

import * as PIXI from 'pixi.js';

let chipTextureCanvas;   // テクスチャ画像が描画されたキャンバス
let texture = PIXI.Texture.fromCanvas(chipTextureCanvas, pixi.SCALE_MODES.NEAREST);
// 黄色いブロックは x=64, y=64の位置から幅と高さ32pxを切り出した部分
texture.frame = new PIXI.Rectangle(64, 96, 32, 32);

// 描画処理に続く....

この画像が大きいと、先ほどのような不具合が出るらしいということがわかりました。つまり、TilingSpriteを使うときはテクスチャ画像の大きさに対して切り出す画像は小さくないほうが良さそうなのかな、という雰囲気です。（おそらく大きい画像から小さい画像を切り出すと、テクスチャをスプライトに貼り付ける際のUV座標の小数点処理で誤差が出てしまうということなのかなぁ）

みんなでつくるダンジョンでは、Canvasをつかって画像を切り出して黄色いブロックの画像を作り、テクスチャとして登録し、描画のときにはテクスチャを切り出さずに表示する処理（さきほどの texture.frame を設定せずテクスチャを目いっぱい使う）にしたところ、ふちの描画で問題が起こることは無くなったかも？（まだ様子を見つつですが）という感じです。

このように「みんなでつくるダンジョン」の開発は現在、細かいところを調整したりする作業をしております。ではでは～。

2018-12-09

PixelArtPark5に行ってきたよメモ

雑記

f:id:piyorinpa:20181209184044j:plain — PAP5に行ってきたよ

PixelArtPark5に行ってきました。PixelArtParkとは、毎年この時期に行われているドット絵関連作品があつまるイベントです。ドット絵作品（絵・ゲーム・ドット絵関連ツールなどなど）やチップチューンミュージックの展示・演奏やお買い物が楽しめます。第1回のころからなんとなく気になっていたのですが、今回こそは行ってみようと思ったのでした。

pixelartpark.com

毎年「3331 Arts Chiyoda」という場所で開催されるのですが、ここはもともと中学校だったところを改装した施設で独特の雰囲気があり、建物も結構好きだったりします。（ちょっと前まではんだづけカフェが入居していたのもこの建物ですね）

ふらふら～っと開場の時刻くらいに訪れたのですが既にそこそこ行列していました。結構待つかな..と心配していましたが、さほど待つこともなくするする～と入場できました。パンフレットが入場券代わりになる方式なので、1000円で購入したのちに空いていそうな箇所から回ります。会場は地下階、1階、2階体育館の3か所に分かれていましたが、まずは地下階へ。ゲームやデジタルアートなどが集まったスペースという感じでした。

ドット絵エディタ「PIXELAITBANANA」を触らせていただき、（そういえばドット絵を描くの久々だなぁと思いながら）即興でお絵かきをしました。シンプルなインタフェースで概ね迷いなくお絵かきが楽しめました。モバイル機でのドット絵エディタの選択肢が増えそうということで、今後のリリースがたのしみ。

12/9(日)開催される #PixelArtPark のB-4ブースでは、実際に #PIXELAIT_BANANA を使ってオリジナルTwitterアイコンが作れます。ドット絵を描いたことがない方や時短したい方向けに、数種類ほどアイコンテンプレートも用意しております。
ぜひお立ち寄りくださいませ。 pic.twitter.com/QGpsQOqATC
— ふるかわ (@T_Furukawa_nkc) 2018年12月7日

f:id:piyorinpa:20181209183542p:plain — 描いた絵

地下階は一旦抜けて、後程またゆっくり見に行こうと思っていたのですが、入場制限がかかっていたのか行列ができていたので断念。（どの会場も結構混んでいました。）

2階の体育館会場ではドット絵資料を拝見したり、アクリルキーホルダーや画集、チップチューンミュージックCDを購入したりしました。なかにはゲームボーイ実機で視聴できるブースもありまして、実機を通して聴くだけでわくわくするなぁと思うなどしていました。体育館正面のステージでは（私がいた頃には）チップチューンミュージック演奏が行われていました。

イクシールさん（ https://twitter.com/IXILL ）のブースでゲームに挑戦したら、ラッキーアイテム「金のにんじん」が出て景品をもらったり。

f:id:piyorinpa:20181209185538j:plain — ゲームで遊ばせていただいたり（金のにんじんがでた！）

「TapTripTown」というゲームのデモ動画を流しているブースがあり、これがとっても気になりました。リリースはこれからということですが、街づくりゲームや箱庭ゲーがすきな私にとっては楽しみ～という気持ち。

f:id:piyorinpa:20181209191310j:plain — デモ動画をみてリリースが気になったり

つづいて1階の会場へ。グッズ物販がメインのようで、PixelArtPark公式グッズも販売していました。こちらの会場では缶バッチやマグネットなどを購入し、かばんの中はほくほく状態に。このようなイベント、金銭感覚が普段より鈍くなっているので油断していると大変なことになってしまうのですが、楽しいのでその辺の心配は一旦忘れます。

特に事前調査（お目当てのサークルさんリストを作るなど）もせずにふらっと訪れましたが、結構楽しめました。すてきな作品がたくさん～というのもそうなのですが、このようなところ（コミケやコミティアもそうですが）には創作エネルギーみたいなものが満ち満ちなので、じぶんの開発も頑張ろうという気持ちになってよいなぁと思うのでした。

ではでは～。

2018-11-27

みんなでつくるダンジョンのベータテストをちょっとずつ始めているよ

みんなでつくるダンジョン製作報告

f:id:piyorinpa:20181127195314p:plain

先日の記事でみんなでつくるダンジョンのベータテストに協力いただける方をゆるく募集したところ、何名かの方に応募していただきました。ありがとうございます！（一人も集まらなかったら寂しく一人でベータテストやろう..と思っていましたが、その心配もなくなりそうでよかった～。登録フォームは現在閉めております。）

ひとまずは面識のある方々に触っていただきながら、ベータテストの慣らし運転をしている最中です。一度に全員に参加いただくのはいろいろと不安があるので、ご協力いただける方の中から少しずつメールにてお声がけさせていただき、徐々に参加人数を増やしていこうと思っています。

不具合報告・質問はどうやって受け付けるの？

とりあえず専用のフォームとTwitterのDMを併用して、どちらか好きなほうを利用いただくようにしようと思っています。（SlackやDiscordを使うのもいいなあと思ったのですが、テストにご協力いただける方々の端末環境などなどがどのようになっているかが心配だったので、ひとまずは確実そうな連絡手段としてこの2つを使ってみることにしました。テスターの方々から「このツールを使いたい！」旨の提案があった場合は別途検討しようかなと思っています。）

受け付けた情報はどうやって管理しているの？

Trelloのボードで管理しています。こんなかんじ。

f:id:piyorinpa:20181127193615p:plain — Trelloの不具合や要望の管理ボード

報告いただいたものを登録し、作業が完了したものは「作業完了」リストに放り込んでいます。ひとまずはこの方法がよさそうか様子を見ながらベータテストしています。テスターの方々にもボードを閲覧していただけるようになっているので、報告したもののステータスが分かるようにしてみました。

ベータテストの試験運用で既にいくつかの不具合報告や要望などをいただいておりますが、開発者以外の方々に触っていただくことは大事だなぁと思ったのでした。

引き続きテスターのみなさんからフィードバックをいただき、よりよいものにしていくぞ～ということで、ではでは～。

2018-11-13

みんなでつくるダンジョンのベータテストに協力いただける方をゆる募します

みんなでつくるダンジョン

みんなでつくるダンジョンのベータテスト（バグや仕様の不備がある可能性が高いバージョンのアプリケーションのテスト）をやりたい！ということで、ベータテストに参加してみたい！という方をゆるく募集します。

dungeon.garakuta-toolbox.com

ベータテストってなにやるの？

開発中の「みんなでつくるダンジョン」であそんでみてください
- ベータテストに協力いただける方のみがアクセスできるサーバ環境をつくります
きっとバグや仕様の不備に遭遇すると思うので、その場合は適宜私ぴよっぴまでご連絡ください
- なるべく気軽に報告いただけるようにしたいぞ！という気持ちです
ベータテストに向けて簡単なドキュメントをつくっていますが、わかりづらいかもしれないので適宜いろいろ聞いてください
- 書きかけのドキュメント
- なるべく気軽に聞いていただけるようにしたいぞ！という気持ちだけど、どんなツールを使うのがいいかなぁ

（ちょっと追記）みんなでつくるダンジョンは主に「マップをつくる」「マップを探検する」の二通りの楽しみ方がありますが、どちらかだけ試したいという方も歓迎です。「マップチップ素材をつくっているからマップをつくってみたい」方や「画像素材はあまり持っていないからマップは作らないけど、ちょっと探検してみたい」という方までどうぞ。

ベータテストに参加していただく条件

SNSのアカウント（TwitterかMastodon）をおしえてください
メールアドレス（連絡用）を教えてください（ベータテスト周りの連絡およびアカウントの作成のみに利用します）
上記の「ベータテストってなにやるの？」にもありますが、適宜いろいろ報告していただける方がうれしいです！
- ただし、おひとり開発なのでもろもろの対応は遅れたりします。ごめんなさい。
やっぱやめた！と言っていただくのはOKです
- 「いろいろ忙しくなっちゃったから」とか「ツールが思っていたのと違った」とか、理由はいろいろあると思うので...。

いつごろからはじめるの？

2018/12の上旬から中旬ごろには始めたい！と思っています。ただいまいろいろ準備中....。

注意事項

公開サーバを置いていろいろな人に触ってもらうのは今回が初めてなので、たとえばサーバ代がかさんで大変！などの状況でテストを予告なく中断することがあります。
- サービスに何かのトラブルが発生した場合も予告なく中断することがあります。
もしありがたいことにベータテスターやってみたい！という方がたくさんいる場合は時期をずらして段階的に参加していただいたり、人数を制限したり、募集を中断することがあります。
- だいたい数人くらい（3~4人くらい？）にご協力いただければよいなぁと考えています。
もしベータテスター同士のトラブルがあった場合はテストを予告なく中断したり、該当のアカウントを停止することがあります。
お渡しするアカウントやパスワード、テスト用サーバのURLを他の人に教えたり、不特定多数が閲覧できるようにしないでください。
やむにやまれぬ事情があったときにベータテストの開始を遅らせたり、中止することがあるかもしれません
- 「ゆるく」募集しているのでそのへんもゆるいかもしれません...。
作ったマップがリリース時に引き継げるとは限らないことに注意してください

やってみたい！の宣言方法

以下のGoogleフォームより必要事項を記入して送信してください。

docs.google.com

ひさびさのベータテスト募集で緊張しておりまずが、よろしくお願いいたします。ではでは～。