忍者ブログ
大変古い古すぎるレビューの置場。お絵かき掲示板消失により3年ぶりに雑記に転用(2017年)。現在はノベルゲーム制作とライブ2Dがマイブーム。
[1] [2] [3] [4] [5] [6]
ティラノビルダーにLive2D3.3制作モデルを読み込む方法(3.3) の続編というか

viewerでのくっつけ方です。

viewerにも2.1のものと3以降のviewerとがあります。
それぞれ対応したファイルしか読み込めないので注意。

mocファイル+mtn  →model.json が2.1
moc3+motion.json+exp3.json → model3.json が3.x

になります。


viewerにmoc3とmotion.jsonを読み込むと
こんな感じにでます。




1回目は書き出しして、モーションがしろぺっぺになり、
メモ帳のテキスト編集でグループ名を設定しましたが、

viewerの左下に設定窓がありました。
ここでグループ名を空欄のままにせず、半角で名称を入力しておけばいいのです。

idleボタンを押すと、idleと入力されアイドリングモーションにグループ設定されます。


そして、やっとわかった表情のつけ方




ファイル→追加→表情 
表情名の入力窓がでます。

半角で入力すると
入力名.exp3.jsonが生成されます。
それをクリックして、下の可動個所のチェックボックスをオンにして
表情を設定します。作るとファイル名の横に*がつきます。

このあたり詳しくはライブ2Dマニュアル公式見るとわかる…はず。

そして、
ファイル→書き出し→すべての表情モーション

で書き出すと、ちゃんとmoc3ファイルとモーション・表情がつながった
model3.jsonファイルができました \(^▽^)/


ただ…viewerで表情のexp3.jsonファイル作ると同じ階層に大量にできるので
書き出し後に、expressionsフォルダをつくっていれて

model3.jsonファイルをメモ帳で開いてファイル先は
直接編集して直しました。


フォルダの作り方あるんだろうか…

あとフォルダ名は公式モデルにならって
motions
expressions
としています。
たぶん…違う名前は使わない方がいい…たぶん。



みんな、頑張ってライブ2D3モデルをティラノに導入しよう~~
なんてったって、3はリピート機能がでかいのです、
個人的にどうしても活用したい!!

では。





















PR
ティラノスクリプトで
ルビを入れるのは
[ruby text=かん]漢[ruby text=じ]字
というタグですが、
ルビを付けたい言葉がたくさんでてくる場合
けっこう手間です。

それを応援してくれるのが、

ルビ拡張プラグイン
→公式プラグインライブラリ
https://plugin.tyrano.jp/item/2020


…は、入手ページのリンクが落ちています。



荻原さまのブログ 『てんぷらたべたい
にて改良版が公開されています。
http://tempura9357.blog.fc2.com/blog-entry-58.html


ありがたくDLして利用させていただきました!

リンク先の方を確認していただくとわかりますが、

こちらのプラグインで

・ルビの位置やサイズ変更
・ルビ辞書登録

が可能になります。


利用方法ですが、
プラグインのフォルダにプラグインのファイルを入れ
その後、first.ksに以下のタグを記述とあるのですが、
    [plugin name=tempura_ruby]

ティラノビルダーではfirst.ksが
保存時に自動で上書き(初期化)されてしまいます。

なので、私は
マイプロジェクト>data>scenario>system>plugin.ks
に記述しました。
1度読めばいいので、タイトル.ksでも最初にとおる部分どこでもいいのです。

ちなみに、プラグイン.ksはビルダーだとfirst.ksの中でコールされているので
ゲーム機同時に読まれます。
[return]は消したらあかんよ。


あとルビ辞書登録が「tempura_ruby」プラグインフォルダ内のdic.jsonという
ファイルに記述すればいいはずなのですが…
自分はうまくいかず、(編集方法と書かれているリンク先が落ちていて調べ方もわからず)

plugin.ksの中に
 [plugin name=tempura_ruby]呼び出しタグの下に
サンプルを元に辞書登録タグを1行ずつ記述しました。

するとばっちり、ルビ辞書登録が機能して
文字を入力してゲームを起動すると
登録した文字に自動でルビがついていました!!

感激;▽;
ありがとうございます!ありがとうございます!


ティラノスクリプト用のプラグインだ…
とビルダーではだめかとあきらめている方!
ティラノスクリプト用のプラグインも記述の場所の工夫で
ティラノビルダーでも使うことが可能ですよ~!

では。



















最近新作ゲームができました。

幻界ドリームツアーというやつです。

ノベコレさん→https://novelgame.jp/games/show/2185
ふりーむさん→https://www.freem.ne.jp/win/game/20923
PV→https://www.youtube.com/watch?v=zH8FzQqNdzU&t=2s

ひっそりとライブ2Dアワード2018にも参加していました。
ていうかそのために作ったミニゲーム集です(その時はおばーちゃんルート未実装)

あと、ティラノビルダーv184からライブ2Dモデルが3対応になり
2.1モデルが使えなくなるので
v170で作っていた不死シリーズに登場させた異生物ライブ2Dモデル
総集合です。

おばーちゃんと夢の国でスローライフが一番の売りのゲームです。


で、そのおばーちゃんルート
戦闘があるのですが、制作中
戦闘中に回復魔法を使うと、HPのマックスより増えちゃうのに困ってまして。
戦闘中に回復魔法を使いまくるとHP増えまくります。

マックスHPより超えたときにマックスHPに戻す
分岐処置をいれないとなーと、むしろめんどうだから裏技的にそのままにしようかなー
とかつぶやいていたら

『マサオさがし』など数々のすごいゲームをたくさん作っている
SOrowさんが(ホームページこちら

マクロをつくって教えてくださりました!!
https://north.undo.jp/blog/post/game/game_24/

神すぎませんかーーーー!!(;▽;)(;▽;)(;▽;)


こちらのキャラ別マクロをお借りして、
無事、回復量がMAXHPを上回っても
上限を超えないものになりました!

ありがとうございました!!!

ビルダーの選択肢ドロップで作れる分岐ボタン手軽だし
色も選べて便利です。
オリジナルボタンにしようとすると、画像ボタンを
つくる必要があり、素材作成にひと手間、
プラグイン借りるのもいいんだけど…

Gリンクボタンのデザインが自分でいじれたらなぁ…と
調べてみました。

ティラノビルダーで
Gリンクボタンのデザインを変える!方法。
みつけたので、時間空けると忘れそうなので、メモしときます。



Gリンクボタンのデザインは

マイプロジェクト>tyrano> tyrano.css

の中に記述されています。


CSS…つまりカスケードスタイルシートドキュメント!
ホームページとかのデザインを一括でやれるあれだ。


tyrano.cssをテキストエディタで開くと
195行目あたりぐらいから
/* button 
---------------------------------------------- */
.glink_button {
display: inline-block;
zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
*display: inline;
vertical-align: baseline;
margin: 0 2px;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
font: 14px/100% Arial, Helvetica, sans-serif;
padding: .5em 2em .55em;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: .5em; 
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.glink_button:hover {
text-decoration: none;
}
.glink_button:active {
position: relative;
top: 1px;
}
という記述があります。
Gリンクボタンの形デザインを指定しています。
-webkit-border-radius: .5em; 
-moz-border-radius: .5em;
border-radius: .5em;
の数字を変えるとボタンの角の丸みなんかが変えられます。
この文字列をコピーしてググると
https://developer.mozilla.org/ja/docs/Web/CSS/border-radius
https://www.webcreatorbox.com/tech/border-radius

とスタイルシートの詳しいサイトが出てきます。
こんな感じで調べながら改造したいひとはやってみてください。



さらに268行以下
/* color styles 
---------------------------------------------- */
/* black */
.black {
color: #d7d7d7;
border: solid 1px #333;
background: #333;
background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#000));
background: -moz-linear-gradient(top,  #666,  #000);
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='#000000');
}
.black:hover {
background: #000;
background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#000));
background: -moz-linear-gradient(top,  #444,  #000);
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#000000');
}
.black:active {
color: #666;
background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#444));
background: -moz-linear-gradient(top,  #000,  #444);
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#666666');
}
という記述があり
/* black */ /* gray */ /* white */ /* orange */
 /* red */ /* blue */ /* rosy */ /* green */ /* pink */
の色味がそれぞれ指定されています。


このうちの1つの色味(
#feeef5の部分)をオリジナル色の組み合わせにしてしまえば
そのままビルダーのプルダウンボタンで使えました。
私はスタイルシート全然詳しくないので
色はペイントソフトで調べながらボタンのどの部分かなー
と書き出しました(THE力業)
 
画像と下の記述みくらべてみて
/* pink */
.pink {
color: #feeef5; ←文字の色
border: solid 1px #d2729e;
background: #f895c2;
background: -webkit-gradient(linear, left top, left bottom, from(#feb1d3), to(#f171ab));
background: -moz-linear-gradient(top,  #feb1d3,  #f171ab);
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#feb1d3', endColorstr='#f171ab');
}
.pink:hover {
background: #d57ea5;
background: -webkit-gradient(linear, left top, left bottom, from(#f4aacb), to(#e86ca4));
background: -moz-linear-gradient(top,  #f4aacb,  #e86ca4);
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f4aacb', endColorstr='#e86ca4');
}
.pink:active {
color: #f3c3d9;
background: -webkit-gradient(linear, left top, left bottom, from(#f171ab), to(#feb1d3));
background: -moz-linear-gradient(top,  #f171ab,  #feb1d3);
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f171ab', endColorstr='#feb1d3');
}
そもそもこんなに、細かくたくさんのボタンデザインが用意されている
ティラノ…すごいですわ…。

ここの記述をスタイルシートボタンデザインとか検索した
サイト様のものを参考に改造してしまえば、きっといろいろできます。



あと、ピンクの行の下にオリジナルのボタンデザインの記述も書き足すこともできます。
/* orijinal */
.oriji {
color: #CFFAFF;
border: none;
background: #235ED8;
background: -webkit-gradient(linear, left top, left bottom, from(#2875AE), to(#2875AE));
background: -moz-linear-gradient(top,  #B1F6FE,  #B1F6FE);
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#3756BB', endColorstr='#3756BBb');
    opacity: 0.8;
}
.oriji:hover {
background: #29498B;
background: -webkit-gradient(linear, left top, left bottom, from(#1D557D), to(#1D557D));
background: -moz-linear-gradient(top,  #B1F6FE,  #B1F6FE);
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#1D557D', endColorstr='#1D557D');
}
.oriji:active {
color: #68D6FC;
background: -webkit-gradient(linear, left top, left bottom, from(#2875AE), to(#2875AE));
background: -moz-linear-gradient(top,  #B1F6FEb,  #B1F6FE);
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#2875AE', endColorstr='#2875AE');
}
これで
[glink  color="oriji "  storage="scene1.ks"  size="20"  target="*tes"  text="テスト"  x="603"  y="156"  width=""  height=""  _clickable_img=""  ]
とスクリプト直記入でオリジナルボタンも使うことができます。
(/* black */ ~ /* pink */のプルダウンメニューからは使えません。)
デフォルトで9色あるのですがもっとボタンの色の種類を増やしたいときに有効です。

opacity: 0.8; は透明度です。
ブラウザによっては使えない記述もあるみたいなので
要検証・調べがいりますな。


CSSファイルの編集はバックアップとって
ファイル壊さないように自己責任で行ってください。

では。グッドゲーム制作ライフ!




ティラノビルダーv183まではLive2Dcubisme2.1までの対応でした。
そちらの読み込み方の個人メモはこちら
2.1の読み込み方ティラノ公式はこちら


で、ついにビルダーv184は3対応!(2.1は読み込めなくなった)ので

Live2D 3.xで制作したモデルを
    ティラノビルダーに読み込むぞ!!


2.1の読み込みかた公式はこちら



ですが…困ってる人が多いと思うので
(私は大変うおおおってなったので)記録を残すのじゃー


自分で作ったモデルをビルダーで動かしたくて、いろいろと試行錯誤しました!
まず今まで2.1で制作していたので
3の使用がいまいちわからーん

ちなみに、オリジナルモデルをティラノビルダーに読み込むために

①モデル作成(moc3ファイル書き出し)→
②モーション作成(○○.motion3.json書き出し)→
③viewerにmoc3ファイルとモーションファイルを
入れる→
④○○.model3.josnファイルをつくる


流れは2.1と同じなのですが…機能が増えてるのでいろいろつまずいた…




つまずき① viewerでモーションが動かない?!

モデル作って、アニメーターでモーションつけて書き出ししたら
mtnファイルじゃなくてjsonファイルになるんですね、3は。

で、3のviewerにもっていって
モーションファイルをほりこんだら、ぜんぜんモーションしない…
というか違う動きをするはずのモーションが全部同じ動きになって変…

なんでや…!!???ってなったんですが…

検証の結果、3のアニメーターでは
同じモデルをレイヤーを分けて作ったモーションを書き出すと
なんかモーションが変なんなるということのようでした。
書き出したモーションを読み込むと、キーフレームの設定が変なんなってたの…
わかるまで時間かかったわー


書き出すとモーションのキーフレームが
へんなんなってたやつ↓

2.1の時はこのやりかたで、1段ずつモーション保存できたんですが
3.3はうまくいきませんでした。


↓一個ずつにして書き出しするとちゃんと動いた!!





つまずき② ビルダーにモーションが反映されない?
viewerでちゃんとモーション動いたので
キャラ名.model3.jsonファイルを作成し
ティラノビルダーに読み込んだ。

ファイル構造は

キャラ名(半角英数)フォルダ
 ├─textureフォルダ(キャラ名.2048などのサイズ)
 │  └─texture_00.png
 ├─motionsフォルダ
 │  └─.motion3.json
 ├─キャラ名.model3.json
 ├─moc3ファイル
 └─キャラ名.cdi3(←mocファイルと一緒にできていたがいらん気がする…)


※motion3のファイルをまとめておく
フォルダの名前は「motions」にしとくのが良いようです。



で、ティラノビルダーに読み込むと



モーションが白い…白いよ…なにもないよ…
モーションが動作しない…モーションが変更できない…



ほんでですね、公式のモデルのjosnファイルをテキストエディタで開いて見比べたら
どうもモーショングループ名がブランクだったのが原因のようでした。



でキャラ名.model3.jsonメモ帳で開いて記入↑
すると!!



↑やったーモーションうつったよ!!
表情もほんとは設定すればいいんだね!(でもまだわからんのや!!)

あとこれはtest一個になってるけど
idleってい名前のアイドリングモーションをグループ設定すると
ランダム再生されるっぽいので
idleグループも設定するとよいかと思われる。



こんなかんじ↑ ちなみに ,    などを忘れるとjosnファイルが認知されず
ティラノビルダーでモデルが表示されなくなるのでテキスト編集気を付けてね。


追記2019/09/09***********************************

このモーションしろぺっぺ問題、
テキストファイルで編集しなくても

グループ設定する方法わかりました。↓
続・ティラノビルダーへ読み込むライブ2dモデルの作り方


*****************************************************



無事表示されました。 絶対座標おかしいけど!!!
表示位置プレビュー(live2Dポジション)でなぜか足が切れてるところより下げると
画像が切れます…が…

下げといたらとりあえず、ゲームのプレビューでは大丈夫でした。





つまずき③ ライブ2Dキャラのフェードインどうやるの?

ライブ2Dが無事ビルダーで表示されましたが、
ぱっ、って表示されてしまいます。
フェードイン、フェードアウトの使い方が
ここ(3以降の読み込みかた公式)でわからないよ…!!

ほんで
ティラノスクリプトでのライブ2Dタグ公式説明
https://tyrano.jp/sample/live2d

を見ました。
どうも、
ビルダーv184のフェードイン・フェードアウトは
ライブ2Dが表示されるレイヤーに適応のようです。

なので

こんなかんじに、(青字のとこね)
1ロード
2フェードアウト(ライブ2Dキャラが表示されるレイヤーを消しておく)
2表示
3フェードイン(ここでキャラがフェードイン表示される)

という感じでした。

あれ…1体目がでたあとに
2体目もフェードインしたいときどうしたらいいの…( ˘ω˘ ) 

こんど、ドロップタグじゃなくて、スクリプト直記入でも
実験してみます…。



ちなみに表情、リップシンクはまだやりかたわかりません。
(モデルの段階からつくらなかんね…)
だれか教えてください。


わからないことはまだあるけど
とりあえずキャラの表示までは行けたよ!!
道のり…長かったさ…_(:3」∠)_


追記****************
viewerで表情つける方法とグループ名設定方法わかったので
こちらの記事もどうぞ
続・ティラノビルダーへ読み込むライブ2dモデルの作り方



便利そうなリンク
ライブ2D仕様一覧
http://live2d.wiki.fc2.com/wiki/Live2D%E3%81%AE%E4%BB%95%E6%A7%98


ブログ内検索
カレンダー
08 2019/09 10
S M T W T F S
1 2 3 4 5
10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30
管理人
HN:
アワラギ
自己紹介:
藤子不二雄(A&F)とアトラスが好き。
ペンタブがCOMPのサマナー勢。

HP:
管理人用
女神転生イマジンカテゴリー画像!!
女神転生IMAGINEのゲーム画像は、
○権利表記
Copyright (c) ATLUS/(c) CAVE
当サイトに掲載されている画像及び文章等の著作権は、株式会社ケイブ及び株式会社アトラスに帰属します。
無許可転載・転用を禁止します。
アクセス解析
Powered by ニンジャブログ  Designed by 穂高
Copyright © でんきみちブロgu。 All Rights Reserved
忍者ブログ / [PR]