開発報告と想定リリース時期など
いつもの開発報告です~。
みんなでつくるダンジョンにBGM再生機能を付けたよ
みんなでつくるダンジョンにBGM再生機能をつけました。マップにBGMとして使いたいoggファイルを一つ設定できます。
(動画中の画像は墨cmさん、BGMはPANICPUMPKINさんからお借りしています。)
BGMは、ゲームを盛り上げたりするという点で、ゲームの構成要素の中でも大事だなと思っています。 音声ファイルってそれなりにファイルサイズが大きいので導入を躊躇しておりましたが、ファイルサイズが比較的小さい(~2MB程度)oggファイルならいいかなぁという気持ちでとりあえずつけてみました。 (容量を食う=より多くのお金がかかることになってしまうので。ストレージの容量に加え、転送容量による従量課金分が心配...。)
BGMの再生にはWebAudio APIを使ってみました。そのへんは別途記事にできたらよいかなと思っています。(WebAudioたのしいなぁ)
運用してみて、あまりにもコストがかかりそうなら何か考えます。。。
ゲーム音楽といえば、「pxtone web」というサイトがとってもよいなぁと思っています。最近は作業用BGMによく使っていたり。開発室Pixelさんのピストンコラージュ でつくった楽曲を投稿・再生できるサイトです。
「Picotune」というサイトもおすすめです。こちらはMIDIファイルを投稿・再生できるサイトです。
リリース想定時期について
「みんなでつくるダンジョン」は、既に1年とちょっと開発しています。 ほんとうはもっといろいろ機能を入れたり、動作の安定性を向上させたりしたいところですが、いつまでも日の目を見ないのは開発している側としてもモチベーションの維持がちょっと大変です。 そこで、3月~4月の間くらいにオープンベータ版として不特定多数の方々に使っていただけるようにしたいなと考えています。
(あくまで予定です。忙しくなっちゃった~とか、ちょっと今はサーバ代が払えません...とか、もろもろの理由で延期するかもしれません)
ではでは~。楽しみにしていただけるとうれしいです。
開発記録(ぴこぴよのお手入れとみんなでつくるダンジョン進捗)
いつもの開発報告をばをば。
みんなでつくるダンジョンのもろもろ
年明け前から今までに、そこそこ進められたぞ!という気持ちです。
カメラ移動まわりの調整
前回のブログ記事の内容を実装しました。カメラがぬるぬる動くようになって楽しくなったぞ!
garakuta-toolbox.hatenablog.com
リフトプラグインの調整
キャラクターが乗って移動できるリフトを作れるプラグインを実装しました。実はこのプラグインを作っているときに、カメラ移動が怪しい(ブレブレする)ので「カメラ移動周りの調整」をしたのでした。だいぶアクションゲームっぽいダンジョンが作れる雰囲気が出てきたのでは?(みんなでつくるダンジョンはいわゆる「ゲーム」ではありません。あくまでみんなが作ったマップを渡り歩けるものみたいなイメージ。)
こういう「リフトが発生する力によってほかのキャラクターやアイテムを動かす」というのは(今回の実装方法だと)ちょいと複雑で、難航したけど何とかできてよかった。。。
足場プラグインの実装
アクションゲームでよくある「片方向には通行できる足場や壁」をつくれるプラグインを実装しました。こんなかんじ。これでマップに迷路要素を付けることができたかな、という気持ちです。
右往左往するキャラクタープラグインの実装
右往左往するキャラクターをつくれるプラグインを実装しました。テキスト表示プラグインと組み合わせるとたのしそう。(キャラクターに話しかけるとキャラが一時停止するようになっています)
それにしても、てくてくうごくメイドさんかわいいなぁ。。。(素材提供いただいている墨cmさんありがとうございました~!)
ベータテストで報告いただいた不具合の修正
先日一区切りしたベータテストでたくさん報告いただけたので、一つずつ直したりしていました。まだちょっと残っているけど概ねよさそうという雰囲気です(ご協力いただきありがとうございました)。
ぴこぴよに「よくつかうハッシュタグ」の挿入機能を追加
ドット絵をTwitterに投稿するとき、しばしば「#ドット絵」「#pixelart」ハッシュタグが用いられますが、この2つのハッシュタグをボタンひとつで挿入できる機能を付けました。
ユーザーさんからのご要望により追加した機能ですが、 たまーにハッシュタグの付与に失敗しているツイート(スペースの有無や微妙な文字の違いなどによるもの)を見かけていたので、この機能を活用して確実にハッシュタグを付与して投稿できるかなと思っております。ぜひご活用ください。
まとめ
年末年始のお休みや連休で、それなりに開発が進められてよかったなぁという気持ちです。みんなでつくるダンジョンはなんとか春先ごろにオープンベータとして出せるといいなぁ。 とはいえ、「じぶんの3Dアバターがほしい」とか、「あのツールをつくりたい」とか、やり切れていないところもあるのでした。時間の使い方は難しい。。。
ではではー
カメラ移動をばねっぽくしてみた
みんなでつくるダンジョンでは、キャラクターを画面中央に表示するようにカメラ座標を決定しています。
今まではキャラクターの位置を以下のように決定していましたが、キャラクターのうごきががくがくするとカメラまでがくがくと動くようになり、画面酔いをしやすくなりそう~という懸念がありました。
camera.x = character.x + (character.width / 2) - (screenWidth / 2); camera.y = character.y + (character.height / 2) - (screenHeight / 2);
そこで、カメラとキャラクターをばねでつないで描画する仕組みに変更してみました。キャラクターが移動するとばねが引っ張られるのでカメラがゆるやかに遅れて動きます。
カメラの重さを, カメラの加速度を, ばね定数, ばねの伸び とすると力のつり合い式を みたいにかけるので、カメラの加速度は で計算できます。 カメラの速度 、カメラの速度 のときばねの伸び なので、積分定数 となります(あっているかな...)。
(フレーム間隔を一定とする) はいずれも定数なので と置けば と書けます。( はばね定数と質量で決定される定数)
カメラ位置を, キャラクタ位置を とすれば なので、最終的には
となります。(y方向も同様に、 とします。)
の値を適当に(1以下に)設定すれば、カメラの動き具合を調整することができます。計算した速度は1フレームあたりのカメラ座標の移動量とみなせるので、1フレームごとに速度を計算してカメラ位置に足していきます。
(y方向も同様に、 とします。)
上記のようにカメラを動かすと以下のようなかんじになります。
カメラを追尾したい対象とばねで繋ぐ実装にしておくと、たとえばばねを他のキャラクターに繋ぎ変えれば、特に何も考えなくてもスムーズに繋ぎ変えた先のキャラクターを見るように移動するのでよいなあという感じです。視点移動とかもらくらくにできそう。
ではでは~。
2018年の週末開発ふりかえり
去年の週末開発ふりかえりはこちら -> 2017年の週末開発ふりかえり - がらくたツールボックスのウェブログ
こんにちはこんにちは。今年もそろそろ年があけてしまいそうなので、今年の週末開発がどんな感じだったかをまとめておこうと思ったのでした。
だいたい以下のことをしました。(順不同)
- がらくたツールボックスのウェブページの公開
- みんなでつくるダンジョンの開発
- 既存アプリケーションのメンテナンス
がらくたツールボックスのウェブページの公開
がらくたツールボックスのウェブページの公開を去年の年の初めに行いました。これをつくってもう1年経つという事実にやや衝撃を受けています。1年はあっという間だ...。
変わったサイトにしたいなーという気持ちで、古めのWindowsみたいな見た目のウェブサイトをつくりました。サイト内で表示されるウインドウはマウスで動かせたり、 ページ内の操作とブラウザの戻る・進む機能がリンクしていたりと、地味に凝った作りにしています。 ただ、スマホ対応するつもりだったけど、こんな感じの変わったサイトにした関係でスマホの小さい画面にうまく最適化するのが難しく、やや放置気味になってしまったのが反省点です。
もう1年経つし、これはこれでアーカイブしておいてメンテしやすいウェブサイトを改めて作るのも悪くないかもなーと思っています。
みんなでつくるダンジョンの開発
今年のメインはこれ!という程度にはちまちまと手を入れていたのが「みんなでつくるダンジョン」です。
今年の初めごろのコミットログを見てみると、どうやら画像アップロード機能周りを作っていたみたいです。このころは、なんとなくステージがつくれて、なんとなくアニメーションがつくれて、みたいな完成度だったのですが、今年中になんとかランディングページを公開したり、クローズドベータテストにこぎつけることができました。(ご協力いただいている方々には感謝です)
諸般の事情で3か月くらい全く開発が進まなかった時期があり、1年くらいで完成できればという当初の目算が崩れてしまったのでした。諸般の事情は現在も抱えているものの、ちまちまと開発を続けて、来年の3月、4月には公開したいなぁという気持ちです。
既存アプリケーションのメンテナンス
あいこんくらぶやぴこぴよの見えない部分のメンテナンスをしていました。大きな仕様変更はないものの、Twitterの仕様変更対応など、アプリケーションを継続的に公開するためのもろもろを裏側でこそこそしていました。
まとめ
今年は新しいアプリケーションの作成をメインで取り組んでいたので、週末開発はたのしいけど、なかなか公開できないために反響が得られず、ときどき心が折れそうになるという状況を久々に感じたりしながら作っていました。 このブログは「なかなか公開できないために~」の部分を、開発記録や技術的なあれこれを公開することで補う目的があるので、来年もちらちらと見に来ていただけるとうれしいです。
ではでは~。
PixiJSのTiling Spriteの描画がうまくいかないので試行錯誤したよ
「みんなでつくるダンジョン」ではPixiJSを活用してWebGLな描画をしています。ただいまパフォーマンスチューニングをしており、この一環として画像を並べて表示するための処理を、指定したテクスチャを繰り返し表示することができるTilingSpriteに置き換えることにしました。
TilingSpriteのデモはこんなかんじ。 https://pixijs.io/examples/#/basics/tiling-sprite.js
しかし、以下の画像のように黄色いブロックのつなぎ目がちゃんと表示されたり、ふちの描画がうまくいかなかったりします。どうやら黄色いブロックを移動すると、期待する通りに描画されたりされなかったりするようです。
この黄色いチップは、以下の画像のように1枚の大きなテクスチャ画像の一部です。
黄色いブロックを描画するときは画像の一部分を切り出して表示しています。プログラムの雰囲気は以下のような感じ。
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
を設定せずテクスチャを目いっぱい使う )にしたところ、ふちの描画で問題が起こることは無くなったかも?(まだ様子を見つつですが)という感じです。
このように「みんなでつくるダンジョン」の開発は現在、細かいところを調整したりする作業をしております。 ではでは~。
PixelArtPark5に行ってきたよメモ
PixelArtPark5に行ってきました。PixelArtParkとは、毎年この時期に行われているドット絵関連作品があつまるイベントです。 ドット絵作品(絵・ゲーム・ドット絵関連ツールなどなど)やチップチューンミュージックの展示・演奏やお買い物が楽しめます。 第1回のころからなんとなく気になっていたのですが、今回こそは行ってみようと思ったのでした。
毎年「3331 Arts Chiyoda」という場所で開催されるのですが、ここはもともと中学校だったところを改装した施設で独特の雰囲気があり、建物も結構好きだったりします。 (ちょっと前まではんだづけカフェが入居していたのもこの建物ですね)
ふらふら~っと開場の時刻くらいに訪れたのですが既にそこそこ行列していました。結構待つかな..と心配していましたが、さほど待つこともなくするする~と入場できました。パンフレットが入場券代わりになる方式なので、1000円で購入したのちに空いていそうな箇所から回ります。会場は地下階、1階、2階体育館の3か所に分かれていましたが、まずは地下階へ。ゲームやデジタルアートなどが集まったスペースという感じでした。
ドット絵エディタ「PIXELAITBANANA」を触らせていただき、(そういえばドット絵を描くの久々だなぁと思いながら)即興でお絵かきをしました。シンプルなインタフェースで概ね迷いなくお絵かきが楽しめました。モバイル機でのドット絵エディタの選択肢が増えそうということで、今後のリリースがたのしみ。
12/9(日)開催される #PixelArtPark のB-4ブースでは、実際に #PIXELAIT_BANANA を使ってオリジナルTwitterアイコンが作れます。ドット絵を描いたことがない方や時短したい方向けに、数種類ほどアイコンテンプレートも用意しております。
— ふるかわ (@T_Furukawa_nkc) 2018年12月7日
ぜひお立ち寄りくださいませ。 pic.twitter.com/QGpsQOqATC
地下階は一旦抜けて、後程またゆっくり見に行こうと思っていたのですが、入場制限がかかっていたのか行列ができていたので断念。(どの会場も結構混んでいました。)
2階の体育館会場ではドット絵資料を拝見したり、アクリルキーホルダーや画集、チップチューンミュージックCDを購入したりしました。なかにはゲームボーイ実機で視聴できるブースもありまして、実機を通して聴くだけでわくわくするなぁと思うなどしていました。体育館正面のステージでは(私がいた頃には)チップチューンミュージック演奏が行われていました。
イクシールさん( https://twitter.com/IXILL )のブースでゲームに挑戦したら、ラッキーアイテム「金のにんじん」が出て景品をもらったり。
「TapTripTown」というゲームのデモ動画を流しているブースがあり、これがとっても気になりました。リリースはこれからということですが、街づくりゲームや箱庭ゲーがすきな私にとっては楽しみ~という気持ち。
つづいて1階の会場へ。グッズ物販がメインのようで、PixelArtPark公式グッズも販売していました。こちらの会場では缶バッチやマグネットなどを購入し、かばんの中はほくほく状態に。このようなイベント、金銭感覚が普段より鈍くなっているので油断していると大変なことになってしまうのですが、楽しいのでその辺の心配は一旦忘れます。
特に事前調査(お目当てのサークルさんリストを作るなど)もせずにふらっと訪れましたが、結構楽しめました。すてきな作品がたくさん~というのもそうなのですが、このようなところ(コミケやコミティアもそうですが)には創作エネルギーみたいなものが満ち満ちなので、じぶんの開発も頑張ろうという気持ちになってよいなぁと思うのでした。
ではでは~。
みんなでつくるダンジョンのベータテストをちょっとずつ始めているよ
先日の記事 でみんなでつくるダンジョンのベータテストに協力いただける方をゆるく募集したところ、何名かの方に応募していただきました。ありがとうございます!(一人も集まらなかったら寂しく一人でベータテストやろう..と思っていましたが、その心配もなくなりそうでよかった~。登録フォームは現在閉めております。)
ひとまずは面識のある方々に触っていただきながら、ベータテストの慣らし運転をしている最中です。 一度に全員に参加いただくのはいろいろと不安があるので、ご協力いただける方の中から少しずつメールにてお声がけさせていただき、徐々に参加人数を増やしていこうと思っています。
不具合報告・質問はどうやって受け付けるの?
とりあえず専用のフォームとTwitterのDMを併用して、どちらか好きなほうを利用いただくようにしようと思っています。(SlackやDiscordを使うのもいいなあと思ったのですが、テストにご協力いただける方々の端末環境などなどがどのようになっているかが心配だったので、ひとまずは確実そうな連絡手段としてこの2つを使ってみることにしました。テスターの方々から「このツールを使いたい!」旨の提案があった場合は別途検討しようかなと思っています。)
受け付けた情報はどうやって管理しているの?
Trelloのボードで管理しています。こんなかんじ。
報告いただいたものを登録し、作業が完了したものは「作業完了」リストに放り込んでいます。ひとまずはこの方法がよさそうか様子を見ながらベータテストしています。 テスターの方々にもボードを閲覧していただけるようになっているので、報告したもののステータスが分かるようにしてみました。
ベータテストの試験運用で既にいくつかの不具合報告や要望などをいただいておりますが、開発者以外の方々に触っていただくことは大事だなぁと思ったのでした。
引き続きテスターのみなさんからフィードバックをいただき、よりよいものにしていくぞ~ということで、ではでは~。