有難うございます！
まず、ここまでのプルリクエストについて
一旦betaブランチにマージしてpush しました。
こちらで調整して安定動作が確認できたら
masterへmergeさせていただきます。
Text animation perfomance
テキストメッセージの表示部分についてですよね？
たしかに現在の１文字ずつDOMに追加するのは
パフォーマンスに課題があると感じています。
ご提示のCSSアニメーションはすごく良さそうですね。
私の方で実装を試してみたいと思います。
（表示方法もユーザが選択できると良さそうです）
User settings
I improve some code of audio tags. There is "settings" system >variable witch has JS
ありがとうございます！
音楽のボリュームについては要望がたくさん出ているので助かります。
ただ、音楽はPC・スマホブラウザ・スマホアプリなどの際に
挙動にバラつきがあるので、なかなか難しいところです。
プルリクを参考にマルチプラットフォームで利用できるように私の方でも確認してみます。
Question: menu, save, load, settings and other
これは悩みどころですね。
↑初心者
・設定ファイルの変更でセーブ画面をカスタマイズ
・CSSでテーマの変更のみで見た目を変えれる
・JS+ CSS + HTMLをフルカスタマイズ
↓上級者
のように製作者の技術レベルによって
ある程度、カスタマイズできるレイヤを分割できればと思っています。
デザインプラグインのような形で外部ファイル化して取り込めると最高ですね。（ユーザーどうしでデザインの共有）
@ValeryVS Sorry for late reply. Below are what he said.
Thank you so much. As of now, I merged your pull requests to beta branch. I will merge that to master branch if I confirmed stability.
Text animation perfomance
Is it about text rendering? Yes, I have an awereness of the issue you mentioned. I suppose CSS animation is great idea and I would like to try to implement it. (It's better if Users can select the way)
User settings
I improve some code of audio tags. There is "settings" system variable witch has JS
Thank you very much. That's very helpful. I've received many requests for volume control from users. However, there are PC, smartphone browsers and native applications. So it is defficult to play music equally on multiplatforms. I'm going to confirm it workable on multiplatforms.
Question: menu, save, load, settings and other
I worry about the skill level of users.
↑Beginner
- Able to customize with config file only
- Able to modify CSS
- Able to full customize all HTML+CSS+JS
↓Expert
I think customizable layers should be divided. It's the best if we can handle external files as plugin like "design plugin". e.g. it makes users can share own designs
P.S. I found CSS animation codes break [trans] tag behavior. I will merge your pull requests one by one.
Can you provide more information about [trans] tag breaking?
May be video of that error? Browser/node-webkit/Android/iOS version?
Is that z-index issue?
I found that "-webkit-transform" works wrong with "z-index".
For example, menu button hides, when something animated.
The solution is addiing
-webkit-transform: translate3d(0,0,0);to elements with z-index.
I saw your changes here, in beta branch
https://github.com/ShikemokuMK/tyranoscript/blob/7c749423cbced950701ccdc4b9c58d87892d0ffc/tyrano/libs.js
but that broke something in last chrome.
Aslo why
children : truein [trans] tag
and all layers from this.kag.layer.map_layer_fore animated?
Hmm... I found something.
This isn't issue with css animations. But becouse of this css animations was failed.
kag.layer.js
forelay:function
...
backlay:function(layer){
...
forelay:function(layer){
...For example started with
layer=message0var fore_class_name = this.map_layer_fore[key].attr("class");
// there fore_class_name = "layer message0_fore layer_fore"then
//削除
$("."+fore_class_name).remove();
// $(".layer message0_fore layer_fore").remove();
// removes nothing
//追加
this.appendLayer(this.map_layer_fore[key]);
// append new layer without removeig oldThere was a few copies of layers. And "animationend" event binding fails.
There was that duplicates.
<div class="layer 0_fore layer_fore" l_visible="true" style="width: 640px; height: 480px; position: absolute; display: none; z-index: 10;"></div>
https://yadi.sk/i/gb5YWPNmhgUGk
Can you open this screenshot?
I checking is there other issuess with [trans] and css animations.
There is another issue.
forelay for message layers strats imidiatly
and for other after animation stops.
message_fore layers show before base_fore layer because of this
var _trans = function(key) {
var layer_fore = that.kag.layer.map_layer_fore[key];
var layer_back = that.kag.layer.map_layer_back[key];
//メッセージレイヤの場合、カレント以外はトランスしない。むしろ非表示
if (key.indexOf("message") != -1 && layer_back.attr("l_visible") == "false") {
comp_num++;
that.kag.layer.forelay(key)
} else {
$.trans(pm.method, layer_fore, parseInt(pm.time), "hide", function() {});
layer_back.css("display", "none");
$.trans(pm.method, layer_back, parseInt(pm.time), "show", function() {
comp_num++;
that.kag.layer.forelay(key);
//すべてのトランジション完了
if (layer_num <= comp_num) that.kag.ftag.completeTrans();
that.kag.ftag.hideNextImg()
})
}
};".message_outer" and ".message_inner" has high "z-index"
so their content still at top.
But... if I fix "transform" and "z-index" conflic in chrome with
* {
/* transform and z-index conflict fix */
-webkit-transform: translate3d(0px,0px,0px);
transform: translate3d(0px,0px,0px);
}then base layer will be above ".message_outer" and ".message_inner" too.
please add my gist URL to your code
I also merge our fixed with css animate branch
ShikemokuMK/tyranoscript#40
because it wont work without them
and remove this line
if (key.indexOf("message") != -1) this.map_layer_fore[key].css("opacity", "")in css animate branch.
I think it isn't used with css transitions.
And update main request
ShikemokuMK/tyranoscript#32
But there is another problem with css animations.
Because DOM objects with "transform3d" in chrome rendered at top, they shown at top of menu button.
And when I add
* {
/* transform and z-index conflict fix for Chrome */
-webkit-transform: translate3d(0px,0px,0px);
transform: translate3d(0px,0px,0px);
}then 0-9 layers shown at top of message layer.
I think there should be other way... will think about it tomorrow.
I have merged various commits to "beta" branch
and pushed it.