ジラフとアンニカ　2019年 ツイッター開発進捗ツイートまとめ

２０１９年の ジラフとアンニカ関係のツイートのまとめです

 

f:id:kamipallet:20181211235725j:plain

ジラフとアンニカ　2018年 ツイッター開発進捗ツイートまとめ

 

 

f:id:kamipallet:20190205205531j:plain

 2018年のジラフとアンニカ開発関連のツイートをまとめてみました!

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

「ジラフとアンニカ」のジャンプアニメーションの解説

 

はじめに

qiita.com

Unreal Engine 4 (UE4) その2 Advent Calendar 2018　21日目の記事です。


 この記事について

現在制作中のハートフルアドベンチャー＋リズムゲームの「ジラフとアンニカ」の
主人公アンニカのジャンプアニメーションについての解説記事です

f:id:kamipallet:20181211235725j:plain
ジラフとアンニカのHPはこちら



アンニカ（主人公）のモーションを全体的にリニューアル

これまでジャンプの仕組みはサードパーソンテンプレートのアニメーションBPを利用していました。アニメーションはグレイマンのアニメを参考に自作したものです。

それがこれ・・・なんですが、

f:id:kamipallet:20181214002654g:plain

なんか硬い・・・　ポーズがヒゲダンスっぽい・・・
これは直さなくては！！



ジャンプのモーションの制作とアニメＢＰへの実装


まず、ジャンプのルートモーションを3DSMAXで作り直しました
この新ジャンプモーションはCGアニメーター / DJの安納さんに制作して頂きました！
右手を前に突き出したポーズにして元気な感じになりました

f:id:kamipallet:20181214004127g:plain

 

f:id:kamipallet:20181215002304j:plain

横からみるとこんな感じです　水平な地面で32フレームで着地するのを想定して
アニメを制作しました

ただ、このままゲームに組み込むと
以下のような地形の場合に途中でモーションが足りなくなります

f:id:kamipallet:20181215202630j:plain

32フレーム以降のモーションが止まってしまう・・



f:id:kamipallet:20181215203251j:plain

サードパーソンテンプレートのアニメＢＰではジャンプのモーションを3分割して実装しています。ジャンブし始め、ジャンプ中ループ、着地　です。ジャンプ中のループはふわふわ上下しているモーションなのですが、ジラフとアンニカではこれがアニメが固くなる原因になっていました

 


f:id:kamipallet:20181221014242j:plain
そこで、後半の27フレームから32フレームのモーション部分を5倍に伸ばして、
ジャンプのモーションを70フレームにしてみました。これで後半少しモーションがゆっくりにはなりますが、すぐ止まることはなくなりました


f:id:kamipallet:20181215205651g:plain
さらに追加で上下のふわふわも追加して、全体で１５０フレームのアニメにしました。これでよほど高いところから落ちない限りはアニメーションが止まらなくなりました


f:id:kamipallet:20181215210037j:plain

アニメBPはこうなりました。シンプル！
ジャンプ中モーションと着地の2分割になりました
着地モーションは元のアニメの後半3フレームを切り出しました

 

踏み出し足でジャンプモーションを切り替え

f:id:kamipallet:20181215210838j:plain

さらに、ジャンプする瞬間で、手の振り方と踏み出し足を変化するようにしました
元のアニメから、２つアニメを増やします。
センターはその場でジャンプした時に再生します

f:id:kamipallet:20181215211234p:plain
踏み出し足で切り替える仕組みは走りのモーションに
L,RのAnime notifyを入れて判定しています

f:id:kamipallet:20181215211516p:plain

ジャンプした瞬間にL,Rどちらの踏み足だったかをみて、
モーションをブレンドで切り替えています。
スピードが０に近い場合はセンターモーションを再生します

f:id:kamipallet:20181215231145g:plain
連続でジャンプするときは左右交互にモーションを切り替えるようにしました。
厳密には足の位置があわなくなるのですが、ここは気持ち良さを優先しました
 また、実際にゲームに入れてみた結果、モーションがゆっくりすぎるように感じため、1.5倍にモーションの速度を速めています

 

大ジャンプになりそうな時は掛け声のボイス＋顔の表情変化をさせる

ダッシュ中にジャンプした時とジャンプ開始時に着地予定地点位置の下を調べて
なにもなかった場合は、掛け声ボイスを再生して気合はいった大ジャンプ感を出すようにしました

f:id:kamipallet:20181215212540j:plain

 

f:id:kamipallet:20181215231625g:plain

顔の表情は正面の向きのカメラでないと見えないので、
ゲーム中はほぼ見えないないのですが、入れて良かったと思います


 


以上ジラフとアンニカのジャンプの工夫のついてでした！技術的には特に難しいことはしていないのですが、アニメーションＢＰは作り込むことでゲームの手触りが良くなる所で制作していて楽しいですね！

明日は suzuki_takashiさんの「真のDynamicBranchをつくろう」です


テクスチャサイズは４の倍数にしようの巻

コミックシーンのテクスチャが４の倍数になってなくて圧縮がかかってなかったので修正しました。４の倍数になってなくてもUE4のほうで自動でいい感じにしてくれてるのかと思ってたんだけどそんなことなかった😅

 

大量にあるので、フォトショで自動で4の倍数にするスクリプトを制作してバッチ処理しました



4の倍数にリサイズしてくれるフォトショのスクリプト・・検索してもでてこなかったので自分で書いてみたけど、一応ちゃんと動いてるっぽい・・フォットショのスクリプト初めて書いてみたけど、使いこなせばいろいろ自動化できそうですね。こちらの方のブログを参考にしました

 

コードはこんな感じ・・・　


preferences.rulerUnits = Units.PIXELS;
var doc = app.activeDocument;
doc.resizeCanvas(Math.ceil(doc.width/4) * 4, Math.ceil(doc.height/4) * 4, AnchorPosition.MIDDLECENTER);

上のコードをテキストエディタにコピーして、
拡張子を.jsxにするとフォトショで使えます
基点を変更したいときは、MIDDLECENTERを書き換えてください

TOPLEFT, TOPCENTER, TOPRIGHT, MIDDLELEFT, MIDDLECENTER, MIDDLERIGHT, BOTTOMLEFT, BOTTOMCENTER, BOTTOMRIGHT


タイプライターアニメ使用時に綺麗に自動改行（ワードラップ）する機能を実装しました

PAXWESTのUNTIESさんブースにジラフとアンニカ展示が決まり、
それにあわせてデモ版をローカライズすることになりました
元々、ローカライズを想定してコミックシーンやUI等の実装を進めていたため
比較的スムーズに進んだのですが、一つだけ問題が残っていました
 

f:id:kamipallet:20180910230710p:plain

これまで右端まで文字が表示された時に、
ウイジェットのワードラップ機能で改行させていました
その際、タイプライターアニメをさせていた場合、
一瞬ワードラップ前の部分が消えるため、不自然な表示になってしまします

・・と言葉で説明してもわかりにくいため、動画用意しました。

f:id:kamipallet:20180910222215g:plain

最初の行のnap の部分が右端で改行する際に消えています
 
実は今まで日本語でも一文字分消える感じで改行表示されていました・・
英語だと一気に消える文字数が多いためとても気になります
そこで文字を表示し始める前に、自動改行済みのテキストをあらかじめ生成して、
それから表示を始める方法を考えました　

f:id:kamipallet:20180910233551p:plain
自動改行済みのテキスト生成のBP（右クリック保存で拡大してみれます）


f:id:kamipallet:20180910222915p:plain

まず、テキストボックスは空にして最小の幅にしておきます


f:id:kamipallet:20180910223259p:plain

最初にParse Into Arrayいうノードで
スペースで単語ごとにわけて配列に格納します
 


f:id:kamipallet:20180910223645p:plain
そのあとテキストBOXに文字を、単語ごとに徐々に追加していきます
テキストBOXの幅をチェックしてウインドウ枠からはみ出る数値になったら・・
 

f:id:kamipallet:20180910224103p:plain

はみ出た単語を一度削除して、改行を入れ、もう一度単語を追加して続けます。
これを最後までやって、改行つきテキストを生成します
 

f:id:kamipallet:20180910233555j:plain
自動改行入りのテキストができたら、タイプライターアニメを再生します
英語と日本語で速度を調整できるようにしています


タイプライターアニメついてはmkさんのこちらのブログを参考に作成しました

mklearning.blogspot.com

 
結果・・・
綺麗に表示出来ました！

f:id:kamipallet:20180910225739g:plain

 
・・・ただこのままだと日本語ののようにスペース区切りがない言語ですと、
改行が入らないので、はみでてしまいます
こんな感じ・・・
 

f:id:kamipallet:20180910230106g:plain

これを回避するため、テキストが日本語の場合は一文字ずつ配列に格納するようにします
はみ出る数値になったあとはお尻一文字消してから改行するようにします
 
出来上がったBPはこちらです

f:id:kamipallet:20180910233558j:plain

青い部分が日本語用の処理です（右クリック保存で拡大してみれます）


これでうまくいきました！
 
この方法を実装するのにみつまめ杏仁さんの
ブログとツイッターを参考にさせて頂きました！
UI関係を実装する時いつも見ています！感謝です！

limesode.hatenablog.com

 
 
 
 
 
 

​

スケジュールの見直しと予想外タスク

開発の近況は主にツイッターで報告している事が多いですが、
後から見返すのが難しいため、たまにはブログも更新しなきゃ・・ですね

ジラフとアンニカのスケジュールですが、2019年末まで一度引き直してみました
今のところ2019年夏・・SETAM版の８月発売を目指しています。
・・・じわじわ伸びていますね・・^^; 

コンソールの移植作業はおそらく半年くらいかかるので、
コンソール版は2020年の頭くらいまでかかるかも・・

ゲーム開発のスケジュール・・得にインディーゲームは伸びがちですね
理由としてはやはり主に一人で制作しているので、予想外のタスクが発生してもなかなか他の人にお願いできず、全部自分で処理しないといけない・・というのが大きいです。そしてスケジュールを立てたときにその見落としているタスクを入れていない場合が多い・・・

僕の場合、予想外タスクは以下のようなのがありました

 

  • 確定申告
    マジで時間かかる・・

  • Bitsummit、コミケ等イベント出展とそれに伴う準備作業
    Bitsummitくらいの規模のイベントだと準備に１～２週間、そしてイベント終わったあと疲れ果てて、元のペースに戻るのに一週間かかる・・最低２週間は時間がなくなるくらいで見積もっていたほうが良い

  • WEBの更新やグッズの制作期間
    宣伝のため外せない・・

  • スタッフへの説明用の資料作成
    一人で作っている場合は必要ないけど、作業をお願いする場合必要。意外と時間かかる

  • 体調不良等でペースが落ちる時期のためのマージン
    なるべく体調が悪くならないよう、食事のバランスを考えたり、ビタミン材飲みまくったりしているけど、それでも体調が悪くなる時もある

  • 各種ミーティング
    ミーティングのある日はその準備等で一日潰れる事が多い

  • 勉強会などイベント参加
     勉強会などはただ勉強するだけでなく、交流目的もあるので定期的に参加しなきゃですが、１日潰れます・・

  • 飲み会
    飲み会は大変楽しいのですが、お酒弱い僕の場合、飲みすぎると次の日が二日酔いで１日潰れます・・・　ビール２杯+サワー系１杯が限界かな・・・飲みすぎ注意


・・・といった感じです
このあたり効率だけ考えると、たとえば無駄な飲み会に出るのを減らすとか考えられるのですが、人生には必要な無駄もあると思うので、あまり削らないほうがいいとも思ったりします・・　さらにこのブログを書く時間も無駄な気がしてきますが、たまには書きたい・・・結局は余裕をもったスケジュールを立てるのが大事・・ということですね


 あと、心の余裕かな～ せこせこせずドーンとかまえて開発したいけど、心配性の自分にはなかなか難しい・・

f:id:kamipallet:20180902192221p:plain

ま、引き続きコツコツ開発していきます！


bitsummit6 に参加しました！日記

 

f:id:kamipallet:20180516204635j:plain

bitsummit6 に参加してきました！
参加するのは始めてで、行く前から非常に楽しみにしていました。



またbitsummitにあわせてUnitesさんからジラフとアンニカが出ることが発表されました！ あわせて新PVを準備しました！編集に３日ほどかけました

f:id:kamipallet:20180516184556j:plain
編集はいつも使っているAFで・・。ほとんどカットのつなぎなのでプレミアのほうがいい気もしますが、慣れてるのでいつもPV作成はAFです


www.youtube.com
３分４４秒とこれまでで最長の長さのPVです。正直長いので最後まで見てくれる
方がどのくらいいるか・・という感じなのですが、しばらくまた更新はないので
見せたい箇所を詰め込みました。次回のPVはストーリーに焦点をあてたものになると思います



今回、TGSで効果的だったPVを流しっぱなしにするモニターを展示する台を自前で用意しました（TGSはモニターと展示台に固定するビームをレンタルでした）
コミケの同人ソフト島で時折みかけるワイヤーラックを使用した台です

f:id:kamipallet:20180516175126j:plainf:id:kamipallet:20180516175248j:plain

モニタはUSB給電可のモバイル液晶モニタです。それにiphoneのHDMIアダプタを接続してPVをループ再生させました。

ラックはダイソーで購入したものです。必要な分だけパーツが買えるので便利です。下前面の棚の２箇所にポールが立つのがイヤだったので、３Dプリンタで足を出力してつけてみました。

f:id:kamipallet:20180516175807j:plain
３Dプリンタで作った足

展示用にHPさんからゲーミングノートPCのOMENをお借りできたので、下に２台目の試遊機を設置。なかなかいい感じになりました！




イベント前日
そして前日、新幹線で京都入り！
コミケやコミティア、ワンフェスなどはだいたい当日設営なのですが、
今回は展示台が今までで一番気合が入ったものを準備したこともあり、前日設営で昼１２時から入りました。そして一人参加・・ということもあり、全部設置完了するまでなんだかんだで、５時間かかりました・・。これまで参加したイベントの中でも最長です。当日設営だと全然間に合わないですね・・・。

f:id:kamipallet:20180516173607j:plain
といった感じで設営完了！２台試遊に、PVを常時流すモニターを1台、ポスター、物販・・粗品のチロルチョコと考えられる全部てんこ盛りです！


f:id:kamipallet:20180516173939j:plainUNTIESさんブースにもジラフとアンニカが試遊台を設置して頂きました！
こんな感じで前日設営完了・・！


f:id:kamipallet:20180516180927j:plain　f:id:kamipallet:20180516180935j:plain

宿は会場近くのゲストハウスにしてみました とても古〜い建物で実に京都らしい‥！気がする。そして一泊2500円で激安！ ただし相部屋です。六畳くらいの部屋がカーテンで３つに仕切られていてそれぞれに布団がしいてある、なかなか変わった部屋でした。隣の人のいびきとかがダイレクトに聞こえてきます・・。またシャワーやトイレも男女共用。なので繊細な人にはオススメできないのですが、僕はそのあたりはOKなので機会があったらまた利用しようかな。




イベント１日目

そんな感じでイベント１日目！イベント中はアテンド＆ひたすら話をしていた感じで、写真を撮っていません！去年出展したTGSに負けないくらい多くの人が来てくれました！評判もなかなか良かったのでとりあえずひと安心。

一人参加のため他の方のブースにあまり遊びに行けなかったのが残念です。
出ているゲームはどれもクオリティが高いうえ、開発者と直接話せる機会もあるので、来場した人はかなり満足できるイベントではないでしょうか？

自分のほうは全然ブースの外に出れなかったのですが、いろいろな方が遊びに来てくれました。ツイッター上で相互フォローでお互い認識しつつもリアルで会ったことのない方と今回多く話せてとても良かったです。感謝です！

インタビューを２つほど受けたのですが、かなり疲れていたのと久々だったこともあり、あまりうまく受け答えできませんでした・・。自分のゲームの事をうまく言葉で説明できるよう、いつも心がけていたほうがいいですね。ジラフとアンニカはいろいろな要素があるので一言でなかなかうまく説明しにくい所もあるのですが、もっと整理しておいたほうがいいかな・・と反省




１日目の夜はポリポリ倶楽部の飲み会に行ってきました。最近、ポリポリ倶楽部のyoutubeの動画を見始めてハマっていたので、これも楽しみにしていました。

www.youtube.com

いろいろな方と話せて楽しかったですが、正直いうと、昼間の展示で足痛＆のどが枯れていて、完全にグロッキーだったのであまり積極的に話す・・という感じでなく愛想も悪かったかな・・と思って宿に帰って反省・・。２次会に行く人も多かったみたいで皆さん本当に体力ありますね～。やっぱゲーム開発は体力かな～




イベント２日目
２日目はあいにくの雨でしたが、お客さんは一日目と同じくらい多く来てくれました！２日目のほうが親子連れの方が多かった気がします。お子さんがゲーム画面みて目をキラキラさせている所をみるとやっぱり嬉しいですね～！

２日日で一番嬉しかったコメントは、「他の展示されているゲームと比べてこれだけ雰囲気が違ってて、日本風の絵柄と世界観で好みです！」でした。逆に言えばあまりbitsummitらしいタイトルじゃないのかもしれないですね。
ジラフとアンニカは僕の趣味全開で今流行りのオシャレな絵柄でもないし、ド派手なエフェクトが出るとか個性的なゲームシステムでもないので、なかなかSNSでバズッたりとか今後もないと思います。ですが、刺さる人には刺さって応援して頂けている方もいますので、そこを大事にしつつ地道に完成を目指したいと思います。

最後に運営のスタッフさんがアンケートをとっていましたので答えました。最後になにかリクエストがありますか？と聞かれたので、「86という展示枠はやはり少なすぎると思うので、もうワンフロア借りて倍くらいにしてほしい」とリクエストしました。やはり枠が少ないと思うのです・・この数だと国内、海外含めて良いインディーゲームをかなりの数、取りこぼしている気がします。フロアー倍は管理考えると主催の人は大変だとは思うのですがぜひ検討して頂きたいです。


 最後に撤収ですが、やはり一人ということもあり、片付けに１時間半かかりました。これもこれまでで最長です。まわりの卓全部片付いたあとも一人片付けてました。ぶっちぎりで最後でした。ま・・これはしょうがないですね



f:id:kamipallet:20180516190947j:plain　f:id:kamipallet:20180516190949j:plain
２日目の夜は一人打ち上げ。うーん寂しい・・ ^^;
やっぱ一人は大変でだれかにお手伝いをお願いすることも考えましたが、今回、関西なので関東の人にはなかなか頼めないし、そもそもお手伝いをお願いするのが苦手なのです・・。なんか悪い気がして・・・
他のグループの飲み会にまぜてもらえないかな～とか思ったりもしましたが、まだまだインディ界隈の人と交流が少なくてこうなってしまった。基本人見知りですしね。
まあでも一人で次の事を考える時間も必要なのでこれはこれでいいかな。



ビットサミット翌日

f:id:kamipallet:20180516191958j:plain

翌日はとてもいい天気でした！鴨川は独特の雰囲気があって良いですね～！



f:id:kamipallet:20180516192038j:plain

そして大阪にあるalweiさんの会社、indie-us-games さんに遊びに行ってきました！
楽しそうな素敵なオフィスで羨ましくなりました。このくらいの人数の少数精鋭の会社は理想ですね！

f:id:kamipallet:20180516192702j:plain

alweiさんオススメのお店でランチ！肉のボリュームが凄い！うまかった・・！


f:id:kamipallet:20180516192949j:plain　f:id:kamipallet:20180516192952j:plain
その後、京都戻って軽く観光して、東京に戻りました。
しばらく大きなイベントはないので、
しばらくまたコツコツゲーム制作に戻ります。

やはりビットサミットは素晴らしいイベントでした！
また来年も来れるといいな・・！