開発報告(みんなでつくるダンジョンのプラグイン追加とか)

きょうもきょうとていつもの作業報告をばをば。

マップ作成の様子を動画にしてみたよ

みんなでつくるダンジョン( https://dungeon.garakuta-toolbox.com )でマップはこんな感じにつくるのよ~ということで、動画にしてみました。およそ30分くらいかけてマップをつくった様子を5分程度に編集しています。

ぜひぜひ皆さんもマップをつくってみてください。

ベルトコンベアプラグインをつくったよ

f:id:piyorinpa:20190602183434g:plain
ベルトコンベアプラグイン
ベルトコンベアプラグインをつくりました。アイテムに適用することで、文字通りベルトコンベアのようにできます。 こんな感じのマップをつくることができます。

dungeon.garakuta-toolbox.com

重力制御プラグインをつくったよ

f:id:piyorinpa:20190602183821g:plain
重力制御プラグイン

重力制御プラグインをつくりました。アイテムに適用することで、重力の方向や大きさを変更できます。 こんな感じのマップをつくることができます。

dungeon.garakuta-toolbox.com

パフォーマンスの調整をしたよ

PCのスペックによっては、一部のマップの動作が重たいということがわかったので、プログラムの見直しを行い動作の軽量化を行いました。 アニメーションの「タイルモード」にはPixiJSのTilingSpriteを活用していましたが、これを多用するとパフォーマンスに影響があるということが分かったので、 なるべくつかわないように手を加えることで動作が軽くなりました。

今後もひきつづき開発を続けていきますのでよろしくお願いします。ではでは~

みんなでつくるダンジョンにサンプルマップのコピー機能がついたよ

f:id:piyorinpa:20190511234735p:plain
サンプルマップをコピーできるよ

みんなでつくるダンジョンにサンプルマップのコピー機能がつきました。

みんなでつくるダンジョンでマップを作成するには、「素材画像を用意」し、「素材画像をアップロード」し、「アニメーションを作成」し、「アイテムを配置」し、....といろいろな工程が必要です。 慣れてしまえばまだしも、はじめてマップをつくるときにはいろいろな工程があってとっつきにくいかも?というお気持ちでした。

そこで、サンプルマップをさわりながら操作になれることで、マップ作成がとっつきやすくなるとよいなと思い、コピー機能を実装しました。

ログイン後、「マップをつくる」モードに訪れるとサンプルマップについての案内画面が表示されるので、興味のある方はぜひコピーしてみてください。 そして、いろいろさわってみながら自分のオリジナルなマップをつくってみてください。 (サンプルマップをベースにしたマップを公開設定にすることは可能ですが、サンプルマップに付属する素材画像については、 みんなでつくるダンジョンのマップ作成のみに利用いただけます。コピーされた素材の「ライセンスの確認」ボタンを押すと利用規約が表示できます。)

あそびかたの例はこちら。

piyoppi.github.io

引き続き開発を進めていくのでよろしくお願いします。ではでは~。

開発記録(みんなでつくるダンジョンを改良しているよ)

こんにちはこんにちは。みんなでつくるダンジョンをリリースしてからはじめての開発報告をば。

スマホでもマップであそべるようになったよ

f:id:piyorinpa:20190507221028p:plain:h500
スマホでもあそべるようになったよ

スマートフォンの場合はスクリーンキーボードを表示するようにしました。これでスマホでもマップを探検することができるようになります。(マップの編集はPCのみ可能です)

ためしに私がつくったマップをぺたり。(ログインしなくてもあそべます)

dungeon.garakuta-toolbox.com


f:id:piyorinpa:20190507224106p:plain
共有URL

マップ実行時に表示されるURLでマップをTwitterなどのSNSで共有できるので、ぜひお知り合いの方々にも作ったマップを遊んでもらいましょう。 (マップを公開するには、配置されたコネクタが接続されているかマップが公開状態になっている必要があります)

アバターをつくらなくても自作マップをテストプレイできるようになったよ

アバターをつくらなくても自作マップで遊べるようになりました。アバター作成が面倒~という方も、お気軽につかってみてください。

サンプルマップのコピー機能をつくっているよ

マップをつくるには概ね以下のような作業が必要です。

  • 画像を登録
  • アニメーションの登録
  • アイテムの配置

やることが多いので、はじめてつかうにはちょっととっつきにくいかも?ということで、サンプルマップをコピーする機能を作成中です。 ちなみに、チュートリアルをヘルプページに載せたので、一通り触ってみたい方はこちらを参考にしてみてください。

piyoppi.github.io

まとめ

ありがたいことに、数名のユーザーさんから不具合報告や、「こうしたほうがよさそう」といった改善案などをいくつかいただいています。適宜修正や改善をしていきますので、よろしくお願いします。 また、気になることがありましたら 報告フォーム もしくは ツイッター までおきがるにどうぞ。

ではでは~。

「みんなでつくるダンジョン」を公開したよ

f:id:piyorinpa:20190421003238p:plain:w600

おととしの年末くらいからちまちまつくっていた「みんなでつくるダンジョン」をベータ版として公開しました。めでたい!とてもめでたい! (ベータ版ということで、機能が少なかったり不具合があったりするかもしれませんのであしからず。突如メンテナンスモードになったりすることもあるかもなので、あたたかい気持ちでつかってみてください)

f:id:piyorinpa:20190426004137p:plain

アクションゲームのような横視点の二次元マップをつくって公開したり、ほかのひとが作ったマップを探検することができます。 マップ同士はつなげることができるので、どんどんつなげて巨大なダンジョンをつくってあそぼう~!というウェブサービスです。

https://dungeon.garakuta-toolbox.com

マップを探検してみる

まずはマップを探検してみましょう。わたしが作ったマップのリンクを貼っておきます。

https://dungeon.garakuta-toolbox.com/maps/1

このようにマップのリンクを貼ることで、作ったマップをTwitterなどのSNSで共有することができます。 (ログインすれば、マップにつながっている他のマップへ移動できるようになります)

マップをつくってあそぶ

マップをつくることができます。まずはアカウントを作成し、マップ作成モードにしたうえで、アイテムを配置していきます。

f:id:piyorinpa:20190421161204p:plain
ログインしてアイテムを配置するよ

はてなマークのアイテムがマップに登場しました。これをつかって床や壁をつくっていきます。アイテムには静止画像やアニメーションを設定できます。 静止画像もアニメーションも「アニメーション」機能でつくるので、次は「アニメーション」機能を触ってみましょう。

画像をアップロードします。もしくは、みんなでつくるダンジョン公式アカウントが提供している画像をコピーします。 (提供している画像は墨cmさまからお借りしているものです。コピーの際に利用規約が表示されるのでご確認ください)

f:id:piyorinpa:20190421161405p:plain
画像をアップロードするよ

つぎにアニメーションを作成してみましょう。静止画像の場合は1フレーム(コマ)だけのアニメーションを作成するか、フレーム間隔を0にします。複数のフレームを設定し、フレーム間隔を1以上にすればアニメーションになります。

f:id:piyorinpa:20190421161731p:plain
アニメーションを作成するよ

作成したアニメーションをアイテムに適用します。こんな感じにアイテムを配置してアニメーションを適用、を行いながら、壁や天井などを作り上げていきます。

f:id:piyorinpa:20190421212046p:plain
アニメーションを設定するよ

ついでにキャラクタもつくってみましょう。キャラクタをつくると自分のキャラクターでマップ内を探検できます。 (キャラクタについての詳しい説明はこちら キャラクタ | みんなでつくるダンジョン:ヘルプ

先ほどと同じ要領でキャラクタ用の画像をアップロードするか、みんなでつくるダンジョン公式アカウントが提供しているキャラクタ用画像をコピーします(こちらも利用規約をご確認ください)。

f:id:piyorinpa:20190421211810p:plain
キャラクタを設定するよ

実行してみます。まずはマップを保存します。つぎにエントリポイント(キャラクタの初期位置)を配置し、実行してみましょう。

f:id:piyorinpa:20190421214914p:plain
エントリポイントを置いて実行してみるよ

だいたいこんな感じでマップをつくることができます。詳しいつくりかたはヘルプページをみてみてください。 みんなでつくるダンジョン:ヘルプ | みんなでつくるダンジョン:ヘルプ

ヘルプページはまだやや作りかけ感があるので、わからないことがあれば「ヘルプ更新して!」と私に言ってみてください。

マップをつなげてあそぶ

作ったマップをじぶんやほかのひとが作ったマップとつなげることができます。 コネクタを配置して、接続先を設定してみましょう。

f:id:piyorinpa:20190422003144p:plain
コネクタを配置してみよう

キャラクターがコネクタに触れると、接続先のマップへと行くことができます。コネクタの詳しい説明についてもヘルプページを見てみてください。

コネクタ | みんなでつくるダンジョン:ヘルプ

さいごに

ようやっと公開出来た!うれしい!公開したてのころはバグに遭遇することもあるかもなので、不具合やご要望があればツイッターhttps://twitter.com/piyorinpa ) や 報告フォーム までお寄せください。 めでたいのでおひとりリリースパーティーをやります。ではでは~!

Blenderのウエイトペイントのコツがなんとなくわかってきた

いつもの開発と並行してアバターづくりにいそしんでいるのですが、Blenderのウエイトペイントにず~~っと苦しめられておりました。 最近ようやっとどんな感じにウエイトペイントとお友達になればよいか、雰囲気をつかみ始めてきましたので自分なりにまとめてみます。

※これは自分がこのように解釈しているというメモな側面があるので、必ずしも記載内容が正しいとは限らないことをご了承ください。

ウエイトペイントってなに?

モデルに対してボーン(骨と関節)を配置することで、ボーンの回転(姿勢変更)によってモデルを変形させることができます。あるボーンが動いたときに、モデルの頂点がどのくらいつられて動くか?という重みづけを「ウエイトペイント」で行います。

f:id:piyorinpa:20190329000121p:plain
胸まわりのウエイトペイントのようす

たとえば上記のように、胸のボーンに対してウエイトペイントをぬると、以下のように胸まわりを動かせます。青い色は重みが少なく、赤色は重みが大きめであることを表していますが、関節を動かすと重みに応じて頂点が動きます。

f:id:piyorinpa:20190329000713g:plain
胸まわりをうごかしてみる

「ペイント」と言われているとおり、0.0~1.0の範囲内でブラシの値を設定し、塗るように各頂点にウエイトを設定していくのですが、これが慣れないとなかなか難しいのです。ある関節に対するウエイトペイントを設定して「これでかんぺき!」と思っても、ほかの関節のウエイトペイントを塗ると、思っていたのと全然違う動きをしてしまう~~ということを2週間くらいずっと繰り返していました(つらい)。

f:id:piyorinpa:20190329002009p:plain
関節ごとにウエイトペイントを塗る(左:胸ボーン、右:脊髄ボーン)
ある頂点は複数の関節の動きに影響されるので、複数のボーンのことを気にかけないといけないのですが、このへんがよくわかっていなかったのが敗因のようです。 たとえば上記のウエイトペイントの場合、胸ボーンと脊髄ボーンとで、塗られている部分が一部重複している箇所があります。この重複している箇所は、どちらのボーンが動いてもウエイトに応じて頂点が移動することになります。

「じゃあ重ならないように塗れば、あのボーンとそのボーンの関連が~とか気にしなくて楽じゃん」と思うところなのですが、そうすると自然な変形にならないのです。

f:id:piyorinpa:20190329002918p:plain
ウエイトペイントをいい感じにしないと自然な変形にならない

じゃあどうやってウエイトペイントと仲良くなればいいんだ?ということについて私が試行錯誤した記録を書いてみます。

とりあえず塗ったあとでボーンを回転させてみる

※この記事ではBlenderの基本的な操作方法については解説しませんのであしからず。

まずは自動でウエイトペイントを設定できる機能があるので、自動でざっくりとした重みづけを行います。

nn-hokuson.hatenablog.com

そのあとはひたすらボーンを動かしてみます、ボーンを選択して「R」キーを押すとボーンを回転させることができます。回転したボーンは「Alt+R」で元の姿勢に戻すことができるので、安心してぐりぐり動かしていきます。

f:id:piyorinpa:20190329004122p:plain
へそがでている~~

自動でウエイトペイントを設定しても、だいたいはうまくいかないことが多いです。たとえば上記のように上体をそらすとおへそがでてしまったり。。

ある頂点ひとつに対するウエイトを設定してみる

f:id:piyorinpa:20190329012649p:plain
Vertex Weightの数値をいじってみる

ここでウエイトペイントを調整していくのですが、ウエイトペイントモードにしたうえで頂点選択モードにし、Vertex Weightsをいじってみます。選択された頂点におけるボーンごとのウエイトを設定できるのですが、ここをいろいろいじってみながらよさそうな値を探していきます。この過程を繰り返すと、関節に対するウエイトの振り具合などがわかってくるようになります。

上記の画像の例だと、選択した頂点に対して「Hips」「Spine」「Chest」などなどのボーンに対するウエイトを設定できることがわかります。

ボーンの動きに対して頂点が大きく移動してほしい場合はウエイトも大きめに、また、あるボーンに引っ張られたい(固定されたい)ときも大きめに設定する感じなのかな?と私は理解しています。

上記の画像の場合、脊髄まわりのボーンの姿勢変化に対しておへそを隠すには、Hips(おしり)のウエイトを大きくすると、おしりに頂点が引っ張られるのでおへそがかくれそうということが分かります。

設定したらもう一度ボーンを動かしてみて、よい感じかどうかを確かめます。良い感じであれば、周辺のウエイトも設定していきます。さすがに一つ一つの頂点に対してVertex Weightsの値をいじって設定するのは大変なので、Vertex Weightsで設定したウエイトを参考にしながら、ブラシでウエイトを置いていくとよさそうです。

f:id:piyorinpa:20190329011348p:plain
Vertex Weightsの数値を参考にウエイトペイントを「塗って」みる

これをひたすら繰り返し、「ある頂点をこのように動かすにはあのボーンに対するウエイトをああすればいい」という感覚を養っていくと、2週間もかけずにそれっぽいウエイトを設定できるようになりそう~と思います。(じぶんはここまで行きつくのにしばらく時間がかかってしまった。。。)

まとめ

ウエイトペイントつらい~~ってずっと思っていましたが、ようやく友達になりはじめることができそう...という雰囲気を感じ始めることができました。これからもちょくちょくアバター作成をすすめていきたいぞ~。 ではでは。

開発報告(マップをたくさんつくってみているよ!など...)

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

みんなでつくるダンジョンのマップをいろいろ作っているよ

「(はやく公開したいので)もう新しい機能は付けないぞ」という固い決意をし、ひたすら動かしては直し、を繰り返しています。公開直後にマップが全くないと寂しい感じになってしまうので、デバッグついでにいろいろなマップをつくってみています。渋めのバグがちらほら発見できているので概ね順調そうです。

いろいろな機能を駆使してこんな感じのマップをつくってみました。

マップ上のアイテムは「プラグイン」によって左右に移動させたりすることができます。上の動画では、たくさんの移動足場を配置してちょっとゲームっぽいマップをつくってみています。 みんなでつくるダンジョンは一見ゲームのように見えますが、「マップ公開プラットフォーム」です。しかし、いろいろな機能を駆使するとゲームっぽいマップがつくれますよ~という例です。

マップに配置したアイテムは、適切に設定することで、キャラクターの押し動作によって動かすことができます。これを利用し、台を所定の場所まで運ばないと対岸に渡れないマップをつくってみました。

アイテムを左右移動させることで、足場を一定時間後に落下させるマップをつくってみました。

これらのマップはリリース後にみなさんも訪れることができるようになる予定です。お楽しみに~。

雑記

最近ようやっとVRシステム(Oculus Rift)を手に入れることができ、いろいろゲームを試してみては「すごいな~」となっています。ここ最近公開している「わくわくアバター作成日記」で作成しているアバターVRシステムを活用して、なにかできると良いなぁという気持ちですが、とりあえずはVRゲームで遊んでたのしいな~と言っています。

上の画像は自作アバターVRシステムでVRChatに初登場してみたときの様子です(バーチャルマーケット に行ってみたときのようす)。まだ口が動かなかったり、瞬きができなかったり、シェイプキーがなかったり、というかんじなので、もうちょっと良い感じにしていきたさがあります。こちらもみんなでつくるダンジョン開発と並行してちょっとずつすすめていかねば...。

はずかしがりやなので、なかなかVRChatにログインできていないですが、見かけたら「あっ!」と声をかけていただけるとうれしいです。

ではでは~

わくわくアバター作成日記3(VRChatにアバターをアップロード)

こんにちはこんにちは。わくわくアバター作成日記の第三弾です。 VRChatは一定期間遊ばないとオリジナルアバターをアップロードすることができませんが、先日私のアカウントのアバターアップロード制限が解除されました。 そこで、いままでつくっていたアバターをアップロードしてみました。

f:id:piyorinpa:20190307002244p:plain
VRChatの世界へようこそ!

しゃがむボタンを押すとなぜかキャラクターが床から生えるみたいな感じになっちゃうけど...。

f:id:piyorinpa:20190307002457p:plain
しゃがむとめりこむ~

鏡の前で静止していると、静止モーションによって微妙にアバターが動くのですが、生きているみたいですごく感動します。

VRChatであそんでみる

アバターをアップロードするには「アップロード制限」を解除しないといけないのですが、はてどうやって遊んだらいいんだ..。という気持ちでさまよっていたら、「Fantasy Shukai jou」というワールドにたどり着きました。ここは日本の方が多く参加されることで有名らしく、ここで右往左往していたら話しかけていただき...という感じでVRChatの雰囲気をつかむことができました。また、VRChat内でお会いした方々やTwitterのフォロワーさんなどにお友達になっていただいたりして、そうこうしているうちにアップロード制限が解除されました。(一説によると、フレンドの数が関係しているとかしていないとか...)

BlenderのモデルをUnityにインポートする

モデリングデータをUnityで加工しつつ、VRChat SDKとよばれるUnityプラグイン(であっているのかな?)を用いてアップロードします。 シェーダ(ポリゴンがどのように描画されるのかを決定するもの)を設定したり、色味を調整する作業はUnity上で行います。

以下の二つのサイトを参考にさせていただき無事アバターをアップロードできました。

memoid.net

vrchatjp.playing.wiki

ハマったポイントは以下のとおり。

アバターの足の裏がXY平面上にある必要がある

VRChat SDKの「Show Build Control Panel」画面で、 This avatar is too short. The minimum is 20cm shoulder height. というエラーメッセージが出ていましたが、むしろアバターは大きすぎるくらいに大きいのでなんでだろう~、と言いながら作業していたら、どうやらBlender上でアバターがXY平面に接地する&Z軸が体の中心になるように配置するとエラーが解消されました。基準面から高さを測定しているのかな..。

f:id:piyorinpa:20190307010851p:plain
アバターがXY平面に乗り、Z軸が体の中心になるようにする

アバターのサイズが大きすぎる

アバターのサイズが大きすぎてVRChat SDKの「Show Build Control Panel」画面でエラーが出ていました(エラーメッセージは忘れてしまった...AABBがはみ出しているよ!みたいな感じのエラーでした)。Unityの Hierarchyペインからアバターを選択し、Scaleを調整することで回避しました。アバターモデリングデータを更新したい場合、Unity上に配置したアバターを一度消して再配置しなければならなくなり、Scaleも設定しなおさないといけなくなるので、ここで設定したスケール分だけ後でBlenderで拡縮調整してやるとよさそうです。

f:id:piyorinpa:20190307011418p:plain
Scaleをよしなに設定する

テクスチャが表示されない

シェーダによってはテクスチャが表示されないものがあるらしく、アバターをインポートしたての頃は「目」のテクスチャが表示されず白目をむいてしまいました。 sprites/default シェーダを目のマテリアルに設定することでテクスチャが表示されるようになりました。

アバターがアップロードされているのにVRChat内に表示されない

私の場合は、VRChat SDKでサポートしているバージョンとUnityのバージョンが微妙に異なるために「アップロードには成功するけどVRChat内で表示されない」事象に遭遇しました。 UnityのバージョンをVRChat SDKでサポートしているバージョンに合わせて再度アップロードすることで解決しました。

まとめ

アバターづくりはたのしい~!といいながら作業しています。ようやっとVRC内でじぶんの体を動かせるようになってうれしいので、これから「リップシンク(会話に合わせて口が動く)」やまばたきなどを追加したい~という気持ちです。VRChat内では「piyoppi」というアカウント名で参加することがあるかもなので、お会いしたときはなにとぞよろしくお願いします(初心者なので失礼があるかもしれませんが。。。ついさっきもどうやらヘッドホンから音が出ていなかったらしく、呼びかけへの応答に失敗し、無視する格好になってしまったのでした。。。)

ではでは~