ShikemokuMK/tyranoscript

novel game engine for Browser, iOS, Android , etc

ShikemokuMK

@ShikemokuMK

CSSアニメーションまわりの処理で transの動作がおかしくなっていますね。

ひとつずつマージしていきます。

gotodeploy

@gotodeploy

@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.

Valery

@ValeryVS

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 : true

in [trans] tag
and all layers from this.kag.layer.map_layer_fore animated?

Valery

@ValeryVS

Okay, I see somthing. Some layers don't shows up when I add multiple images and start [trans] tag. Working on it.

Valery

@ValeryVS

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=message0

var 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 old

There was a few copies of layers. And "animationend" event binding fails.

ShikemokuMK/tyranoscript#43

Kikyou Akino

@bellflower2015

How was layer order? Just is hidden in other one maybe?

Sorry for my broken english.

Valery

@ValeryVS

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.

Kikyou Akino

@bellflower2015

I open now...BINGO

How about this https://gist.github.com/bellflower2015/8943cecdb827159dc87c

usage: [iscript]$.getScript('chrome_bug_fix.js');[endscript]

Kikyou Akino

@bellflower2015

I clearly specified for create layer when [forelay] and replace layer when [backlay], also [trans].

It may not only just a workaround, but work fine.

Kikyou Akino

@bellflower2015

Can you open my gist?

Valery

@ValeryVS

Yes.
You are right.

This strings also switch classes 'layer_back', 'layer_fore'.

this.map_layer_back[key].removeClass(fore_class_name);
this.map_layer_back[key].addClass(back_class_name);

I missed this in my fix.

Kikyou Akino

@bellflower2015

Thanks ;)

Recent Chrome sorting is ignore the order of the hasharray, so need to divide clearly base, message and others.

Kikyou Akino

@bellflower2015

I think that it is not a problem unique to your improved version (also original).

Valery

@ValeryVS

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.

Valery

@ValeryVS

Found the way.
We can use jQuery's replaceWith function instead of remove and add layer.

$("." + back_class_name.replace(/ +/g, '.')).replaceWith(this.map_layer_back[key]);
...
$("." + fore_class_name.replace(/ +/g, '.')).replaceWith(this.map_layer_fore[key]);

Valery

@ValeryVS

ShikemokuMK/tyranoscript#43

Kikyou Akino

@bellflower2015

This message was deleted

sorry
please add my gist URL to your code

Valery

@ValeryVS

To code? To comment in .js file or to pull request message?

Kikyou Akino

@bellflower2015

github comment or code, either ok, thanks

Valery

@ValeryVS

I edit pull request message
ShikemokuMK/tyranoscript#43

Kikyou Akino

@bellflower2015

yep, thank you very much :)

Valery

@ValeryVS

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.

Kikyou Akino

@bellflower2015

About opacity, you're right, I edit my gist now, too.

gotodeploy

@gotodeploy

:+1:

Valery

@ValeryVS

Do some experiments.

If we apply higher z-index to message layer, it will be properly displayed above character layers.

This message was deleted

And it's children elements too.

Or define it after character layers.

Valery

@ValeryVS

jsfiddle.net/wtfrgd73

Valery

@ValeryVS

This way.
I add z-index to parent message layer in css animation branch.
ValeryVS/tyranoscript@21e20e6

gotodeploy

@gotodeploy

@ShikemokuMK 上記内容ってご理解されてます？

Kikyou Akino

@bellflower2015

これ立ち絵の効果に使えそう。 http://elrumordelaluz.github.io/csshake/

ShikemokuMK

@ShikemokuMK

:+1:

Thank you very much!
I have merged various commits to "beta" branch
and pushed it.

全体的に問題無さそうだけど、セーブ画面が崩れてるかな。諸々、もう少し確認します！

Valery

@ValeryVS

Refactor transition branch still has some unresolved bugs.
Applying "translate3d(0px,0px,0px)" is bad fix. Somthing else needed.
That is abolut z-index, opacity and, probably, transform.

This is strange but if tyrano_base scaled <= 1 then animations are OK.
But if tyrano_base scaled > 1 then animated objects overlapping other.

Valery

@ValeryVS

Probably this.
http://philipwalton.com/articles/what-no-one-told-you-about-z-index/

Valery

@ValeryVS

Finaly... I'am already seeing this webkit bug.
This will be applyed instead of transform3d(0,0,0)

.tyrano_base * {
    /* without this elements with animations overlaping other */
    -webkit-backface-visibility: hidden;
}

Valery

@ValeryVS

I have updated branches with this webkit fix and some improvements
refactor-transition
ShikemokuMK/tyranoscript#40
dev_valeryvs_clean
ShikemokuMK/tyranoscript#32
also merge master branch into dev_valeryvs_clean

Valery

@ValeryVS

Audio update will be finished in next few days.

multiple audio layers
play audio from layers on game load
volume settings
voice tag (audio channel that stops on next text)
mute tag
adding audio file to queue

Valery

@ValeryVS

Audio refactor branch
https://github.com/ValeryVS/tyranoscript/tree/refactor-audio
check commit message
ValeryVS/tyranoscript@c485f80

I will test last changes on android and make new features.

voice tag (audio channel that stops on next text)
mute tag
adding audio file to queue

Questuion:
質問
Is it ok to use "variable.sf.settings.volume"?
"variable.sf.settings.volume"を使用して大丈夫ですか？
Now "this.variable.sf" is set three times in kag.js.
If we use "variable.sf.settings.volume" this should be refactored.
https://github.com/ValeryVS/tyranoscript/commit/c485f80f0b39f9b5fac672af89ee289186f7909a#diff-e6ecc5b1867ec8519179b9875b932672R38
https://github.com/ValeryVS/tyranoscript/commit/c485f80f0b39f9b5fac672af89ee289186f7909a#diff-e6ecc5b1867ec8519179b9875b932672L247
https://github.com/ValeryVS/tyranoscript/commit/c485f80f0b39f9b5fac672af89ee289186f7909a#diff-e6ecc5b1867ec8519179b9875b932672L329

Where communities thrive

People

Repo info

Activity