開発報告とわくわくアバター作成日記2

きょうもきょうとて作業報告だぞっ!

みんなでつくるダンジョンの本番環境を準備したよ

みんなでつくるダンジョンの本番環境(みなさんに使っていただくためのサーバ環境など)をつくっていました。本番のサーバ環境もHerokuでつくりましたが、ひとまずHobbyプランで運用するつもりです。課金も済ませたので、さっさと公開したい~というお気持ちになっています。

本番環境つくったし、トップページもちょっとずつ更新したさです。

みんなでつくるダンジョンのバグ取り作業を引き続き進めているよ

おおむね1日1~2個のバグをみつけてはつぶし...、という作業を地道に行っています。デバッグのためにマップをつくりながら実際に使ってみたりしているのですが、おかげで検証環境上にはそこそこの量のマップができてきました。ただ、公開時にある程度のマップがあると良いかなと思いつつ、検証環境上のマップを先ほど作った本番環境へ移行することは面倒なので、本番環境下で作業しながらバグを見つけつつ、マップを増やしていくぞ~、という感じです。

わくわくアバター作成日記その2

前回までに作成した全身モデルにボーン(関節)を入れて、ウエイトペイント(あるボーンに対して頂点をどれくらい変形させるかを設定すること)をしていました。

ボーンを入れて、なんとか試行錯誤しながらウエイトペイントをして、なんとなくポーズが取れるようになってきました。

f:id:piyorinpa:20190217210547p:plain
カメラ目線でポーズをとっていただいたよ

ボーンを入れる作業はさほど時間もかからず行えましたが、ウエイトペイントが難しい...、となったのでした。(ボーンの構造は以下のサイトを参考にしながら行いました)

qiita.com

ボーンウエイトは「頂点」に対して設定する

f:id:piyorinpa:20190217211849p:plain
あるボーンに対するウエイトの状態

上記画像は腰部分のボーンに対するウエイトです。青がボーンの影響を受けにくく、赤が受けやすいという状態を表しています。一見グラデーションをきれいに塗っていく作業なのかなという気持ちがしますが、実際には「頂点(上の図でいうところの四角いメッシュの交点の部分)に0.0~1.0の値を設定していく」のです。これをペイントのブラシツールのようなインタフェースで設定していきます。はじめにこれを理解しておらず、「なかなか思うように塗れないなぁ」となっていたのでした。

関節を意識してメッシュを切る

はじめはアバターの形をつくることのみに集中していたため、関節周りに頂点が全くなかった状態でした。しかし、「関節を動かす」ということは「ある頂点をボーンの角度に従い移動する」ということなので、関節付近にはちゃんと関節っぽくメッシュを切る必要があるようです。(Twitterのフォロワーさんに教えてもらってなるほど~となったのでした。この手の情報は検索すると参考になるサイトがいろいろと出てくるようです。)

f:id:piyorinpa:20190217213530p:plain
関節を曲げる前と曲げたあと

ほんとうは「関節を曲げる方向」を意識してメッシュを切ると見栄え良く曲げることができますが、今回は(初期姿勢の概念がまだ理解できておらず、関節の曲がる向きを私が想像できなかったため)関節の周りをループカットすることで頂点を増やす対応をしました。イメージ的には「曲がるストロー」みたいな雰囲気です。関節を曲げたとき、どうしても片方のポリゴンがめり込む形になりますが、まあそれっぽく見えればよいということで。

関節周りはボーンを曲げながらウエイトペイントをし..。という作業の繰り返しで調整していきました。はじめたころは「一度設定したボーンの回転角度をAlt+Rでリセットできる」ことに気づかずに苦しい思いをしたりしていましたが、最終的には曲げながらウエイトペイントをし、戻したくなったらボーンを選択しつつAlt+Rを押して初期姿勢に戻す、という感じで作業をしました。

胴体が服を突き抜けてしまってつらい

f:id:piyorinpa:20190217214702p:plain
ふとももが突き抜けちゃってる~

衣服と体が別オブジェクトなので、うまくウエイトペイントをしてあげないと内側の体ポリゴンが衣服ポリゴンを突き抜けてしまいます。体と衣服になるべく余裕を持たせたり、頂点を一つずつ動かしながらすき間を調整したり、ウエイトペイントを試行錯誤することで対応しました。

ただ、あたり判定を加えてクロスシミュレーションをしているわけではないので、姿勢によってはどうしてもはみ出てしまいます。ある程度諦めることで一旦は進めようかなと思っています。(ひどい時は服の下の体ポリゴンを消してしまうのはありかも?と思いつつ、長袖から半袖へ、などの着せ替えなどをしたくなったりすると思うので、ひとまずは体ポリゴンはそのままにしています)

まとめ

最近はじぶんの時間がなかなかとりづらくなり始めているので、みんなでつくるダンジョンのリリース時期などが遅れたりしそう...ですが、ひきつづきちまちまと作業をしていきますので、ブログの更新をゆるゆるとお待ちいただけるとうれしいです。 ではでは~。

開発報告(デバッグやアバター作りなど)

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

みんなでつくるダンジョンのデバッグ

「3、4月にリリースしたいぞ!」と以前の記事で表明したので、新しい機能の追加は控えつつ、外部サーバ環境で遊んでは直しを繰り返しています。いまのところ、1日1個くらいのバグが見つかっては直すような感じなので、これが落ち着いたら本番環境を作っていくぞ~という気持ちで作業しています。

というわけで、当分はブログで「こんな機能を作っていますよ~」な報告ができないのですが、公開に向けて引き続き準備をしていきます。

ぴよっぴのアバターをつくっているよ

私ぴよっぴの3Dモデリングをはじめました。ツイッターGitHubに登場するこのキャラクター、(私が描いた)ちゃんとした全身絵がなかったりしていたので、この際3Dモデルにしてしまおう~という気持ちです。

GitHubのアイコン Twitterのアイコン
f:id:piyorinpa:20190204232001p:plain:w200 f:id:piyorinpa:20190204232045p:plain:w200

というわけで、blenderでせっせことこさえている最中です。こんなかんじ。

f:id:piyorinpa:20190204232600p:plain
今現在のできぐあい

参考にしたサイトは以下の通りです。ちなみに私はblenderをはじめとした3Dモデリングツールを触るのは今回が初めてです。(機械系3DCADは触ったことがありますが、操作方法やツールの概念的な部分がいろいろと勝手が違う感じだったのでした...)

memoid.net モデリングしたら、とりあえずVRChatで動かせるようにしてみたい!と思ったので、まずはこちらのサイトの「モデリング」の項で紹介されているサイトを順に訪問しました。

www.cgradproject.com このサイトの「blender入門」では、初回起動から簡単な人型人形のモデリング、ボーンを入れて動かすまでが解説されているので、実際に操作しながらblenderの使い勝手などを学ぶことができました。この内容を一通り体験しておけば勝手がわかるようになるので、「○○をやるときはどうやればいいのだろう..?」というときに都度ググって解説サイトを見て解決、という感じになれました。(勝手がわかっていないとそもそも検索のしかたが分からなかったりするので...)

blender-cg.net ある程度操作に慣れたタイミングで「これってどうやればいいのだろう?」と思ったときに参考にさせていただきました。

riotoqll.hatenablog.com 頂点の選択方法などを参考にさせていただきました。

vrchatjp.playing.wiki せっかくアバターを作っても、結果的にVRChatで動かせないと悲しくなってしまうので、本格的にモデリングする前にどんなことを気を付ければいい?という点を確認しました。

qiita.com VRChatでアバターを動かすには、UnityのHumanoidと呼ばれる構造でボーン(関節)を構成する必要があるようなのでどのような構造にすればいいのか?を参考にさせていただきました。 さきほど挙げた CGRAD PROJECT さんの リギング の項のボーンの構造をHumanoidに読み替えて作ったりしてみていました。

f:id:piyorinpa:20190204234748g:plain
おためし人形にボーンを入れてみたよ

というわけで、こんな感じでアバターをこさえております。「これでいいのか?」と言いながら作業するのは久々でたのしいのですが、なかなか時間と気合が必要な感じです。ゆるゆると普段の開発と並行して進めようかなと思っております。

ではでは~。

開発報告と想定リリース時期など

いつもの開発報告です~。

みんなでつくるダンジョンにBGM再生機能を付けたよ

みんなでつくるダンジョンにBGM再生機能をつけました。マップにBGMとして使いたいoggファイルを一つ設定できます。

(動画中の画像は墨cmさん、BGMはPANICPUMPKINさんからお借りしています。)

BGMは、ゲームを盛り上げたりするという点で、ゲームの構成要素の中でも大事だなと思っています。 音声ファイルってそれなりにファイルサイズが大きいので導入を躊躇しておりましたが、ファイルサイズが比較的小さい(~2MB程度)oggファイルならいいかなぁという気持ちでとりあえずつけてみました。 (容量を食う=より多くのお金がかかることになってしまうので。ストレージの容量に加え、転送容量による従量課金分が心配...。)

BGMの再生にはWebAudio APIを使ってみました。そのへんは別途記事にできたらよいかなと思っています。(WebAudioたのしいなぁ)

運用してみて、あまりにもコストがかかりそうなら何か考えます。。。


ゲーム音楽といえば、「pxtone web」というサイトがとってもよいなぁと思っています。最近は作業用BGMによく使っていたり。開発室Pixelさんのピストンコラージュ でつくった楽曲を投稿・再生できるサイトです。

www.ptweb.me

「Picotune」というサイトもおすすめです。こちらはMIDIファイルを投稿・再生できるサイトです。

picotune.me

リリース想定時期について

「みんなでつくるダンジョン」は、既に1年とちょっと開発しています。 ほんとうはもっといろいろ機能を入れたり、動作の安定性を向上させたりしたいところですが、いつまでも日の目を見ないのは開発している側としてもモチベーションの維持がちょっと大変です。 そこで、3月~4月の間くらいにオープンベータ版として不特定多数の方々に使っていただけるようにしたいなと考えています。

(あくまで予定です。忙しくなっちゃった~とか、ちょっと今はサーバ代が払えません...とか、もろもろの理由で延期するかもしれません)

ではでは~。楽しみにしていただけるとうれしいです。

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

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

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

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

カメラ移動まわりの調整

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

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アバターがほしい」とか、「あのツールをつくりたい」とか、やり切れていないところもあるのでした。時間の使い方は難しい。。。

ではではー

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

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

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

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年の週末開発ふりかえり

去年の週末開発ふりかえりはこちら -> 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の仕様変更対応など、アプリケーションを継続的に公開するためのもろもろを裏側でこそこそしていました。

まとめ

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

ではでは~。

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

「みんなでつくるダンジョン」では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 を設定せずテクスチャを目いっぱい使う )にしたところ、ふちの描画で問題が起こることは無くなったかも?(まだ様子を見つつですが)という感じです。

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