ティラノビルダー。ルビ拡張プラグインお借りしました。

ティラノスクリプトで
ルビを入れるのは

[ruby text=かん]漢[ruby text=じ]字

というタグですが、
ルビを付けたい言葉がたくさんでてくる場合
けっこう手間です。

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

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


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

が

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


ありがたくDLして利用させていただきました！
※こちらの導入方法の解説は無断で行っています、
　制作者は「てんぷらたべたい」萩原様と「豆ノ帖」黒豆キヅネ様になります。
　ルビ拡張プラグインの導入するときはDL先の規約を確認し、
　製作者様の名前をクレジットに表記してください。


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

こちらのプラグインで

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

が可能になります。

[ruby text=かん]漢[ruby text=じ]字　だと　
漢のうえにかん　字のうえにじってなっちゃう
のが辞書登録で
[rubydic str=漢字 text=かんじ  ]とすれば　漢字のうえにかんじが
表示されます。わかりにくいけどやってみたらわかる。

利用方法ですが、
プラグインのフォルダにプラグインのファイルを入れ
その後、first.ksに以下のタグを記述とあるのですが、
この 
  [plugin name=tempura_ruby]
のタグをビルダーのfirst.ksに入れると
ティラノビルダーではfirst.ksが
保存時に自動で上書き(初期化)されてしまいます。

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

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


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

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

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

感激；▽；
ありがとうございます！ありがとうございます！


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

では。



追記(2020/4/19)＊＊＊＊＊＊＊＊＊＊

ルビのサイズや位置の変更は
これを活用させていただいた制作中のゲームでは必要がなく
使っていません。

ルビの辞書機能はdicファイルではなく画像のプラグインファイルに
記述して動作しました。

 


その他の機能も
リードミーやサンプルファイルを参考に
記述をこのファイルにすると動作するのではないかと思います。
どうでしょうか？


追記(2020/4/20)＊＊＊＊＊＊＊＊＊＊

コメントでいただいた、ルビのサイズや位置の変更と
今日のルビについてテストしました。

まず　DLしたtempura_rubyを解凍して
\data＞others＞plugin
に入れます。

プラグインを解凍してそのままだとtempura_ruby＞tempura_ruby＞各必要ファイル
となっているようです
プラグインの導入は　プラグイン＞各必要ファイル　にする必要があるため

plugin＞tempura_ruby＞各必要ファイル　となるように入れてください。
プラグイン導入の基本です。

参考リンク　ティラノスクリプト 製作テクニックwiki
https://tyrano.wiki.fc2.com/wiki/
システム関係A→プラグインについて→プラグインの導入方法
→基本のプラグインファイルの設置方法を参考にしてください。



マイプロジェクト＞data>scenario>system>plugin.ks
にルビ拡張に必要なタグを入力します。
タグはDLしたtempura_rubyプラグインの
_sample.ksからコピーしてます。



builder=184はビルダーのバージョンです。
バージョンに合わせて変えてください。

_sample.ksから記述をコピーしてテキストボックスに入れます。


こんな感じで表示されました。今日のルビも均等割り付けされています。




[ruby text=きょ]今[ruby text=う]日　だと　
今のうえにきょ　日のうえにうがでますが
[rubydic str=今日 text=きょう  ]で均等割り付けされます。

ちなみにプラグインの_reedmeを参照すると
typeタグで ルビの水平位置。
均等割り付けと中央寄せが指定できるようですが、
justifyの均等割り付けは指定なし(記述無し)でデフォルトでなるそうなので
均等割り付けでよい場合は、指定しなくていいかと。

  
サイズも変わっています。



フォントも変えられました。








 
こんな感じでした。
これでうまくいかない場合は、プラグインの挿入フォルダや
他の記述が間違っているかもしれないので他の場所を確認してみてください。

回復時にHP上限を超えないようにするマクロお借りしました。

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

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

ノベコレさん→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からライブ２Dモデルが３対応になり
2.1モデルが使えなくなるので
v170で作っていた不死シリーズに登場させた異生物ライブ２Dモデル
総集合です。

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


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

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

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

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

神すぎませんかーーーー！！(；▽；)(；▽；)(；▽；)


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

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

Gリンクボタンをちょっとオリジナルデザインにする方法。

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

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

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



さらに２６８行以下

/* 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ファイルの編集はバックアップとって
ファイル壊さないように自己責任で行ってください。

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

ティラノビルダーでLive2Dcubisme3モデルを読み込む方法。

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


で、ついにビルダーv184は３対応！（2.1は読み込めなくなった）ので

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

→２．１の読み込みかた公式はこちら



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


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

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

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

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




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

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

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

なんでや…！！？？？ってなったんですが…

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


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

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***********************************

このモーションしろぺっぺ問題、
テキストファイルで編集しなくても
グループ設定する方法わかりました。↓
続・ティラノビルダーへ読み込むライブ２ｄモデルの作り方


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



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

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





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

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

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

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

なので

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

という感じでした。

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

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



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


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


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



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

ティラノビルダーバージョンの違いメモ。

ちょうお世話になってるツール
ティラノビルダーですが、
私が初めて触ったのはｖ1.70だったのですが、
現在ｖ1.84になってます。

プロ版でもちょうお安くてちょうありがたいツールで
これだけアプデしていただけるなんてすごいですよ。

で、つくり途中のゲームがそれぞれのバージョンに散開してて
過去バージョンで作ったゲームを更新したくていじることもあり
書き出した時の処理とか…また自分用のメモです。



V170…
安定版。現在はもう公式でDLできなくなってる？
バックログ画面の戻るボタンがデフォルトだと
ふりーむさんサーバーでリロードされてしまうので
backlog.htmlのbackボタンのタグを手動で編集するか、
ティラノスクリプトv461以降のhtmlファイルを利用する必要あり。
（ノベコレサーバーだと問題なし）

[wait_cancel]タグが使えるが

[wait_cancel]をいれたあとも、ウェイトが残っていて
その後に出るテキストが飛ばされたり、歯車ボタンが触れなくなったりすること有

乱数の計算に誤差が出る。(乱数誤差は～v182まで)
→乱数誤差の対応方法


CGモードをビルダーで編集するとエラーになるので
直タグ打ちの必要あり。

変数管理窓でシステム変数に設定した変数の数値をいじる時は
スクリプト記述必要（ドロップボックスの変数のバーだとシステム変数扱いにならない）

縦長の画面レイアウトで、画像位置をプレビューで設定しようとすると
画面外に画面がいってしまう。

あと画像がないのにイメージ消去があると止まります。
イメージの消去ができないから先に進みません。


32bit版なので64bitPCで起動するとうちの場合
ステータスバーに表示されるのみで画面が出ず…

（プロパティ＞互換性＞高DPIの設定＞高DPIの設定の上書き＞システム（拡張）を選んでOK）

で64bitPCでも32bitのソフトを起動できるようになります。

32bitで書き出ししたアプリゲームも同じ動作になります。



V180…
ふりーむさんにブラウザゲームで投稿してマルチデベロップメント機能を
申請してもウィンドウズ用DLファイルでエラーが出るらしく不可

（ノベコレサーバーだと未検証）

ブラウザによってはへんな指示を入れていないクリック待ちが入る。
(推奨ブラウザのクロームなら大丈夫なはず(？)…たぶん)

システム変数が管理窓で普通に使える

CGモード、回想モード充実

キャラクター表示モードがパワーアップ

よって170から180へのプロジェクトファイルの移動は無理だと思われる。

[wait_cancel]のあとにウェイトが残らないありがたやー！；▽；


あと画像がないのにイメージ消去があってもフリーズしなくなってる！？



v182…
v180からプロジェクトファイル以降しても大丈夫っぽい（たぶんね…とりあえず）

画面サイズ16：２（1280×720）が選べる

外部プラグイン追加機能が充実




v183…
乱数で誤差が出る不具合が修正されています！！
Live2Dcubisme2.１対応はここまで
32bit版


v184…
６４bitのみの対応、３２bitPCでは起動不可

ライブ２Dキュビズム3.0に対応！！
そしてライブ２D 2.1以前のモデルは読み込み不可に！！！

まだ使い始めたばかりなのでいろいろ未検証
（とりあえずv182で作り差しのゲーム作ってからこちらを進める）



ざっとメモでした。