Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
    ShikemokuMK
    @ShikemokuMK

    有難うございます!

    まず、ここまでのプルリクエストについて
    一旦betaブランチにマージしてpush しました。

    こちらで調整して安定動作が確認できたら
    masterへmergeさせていただきます。

    Text animation perfomance

    テキストメッセージの表示部分についてですよね?
    たしかに現在の1文字ずつ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をフルカスタマイズ
    ↓上級者

    のように製作者の技術レベルによって
    ある程度、カスタマイズできるレイヤを分割できればと思っています。

    デザインプラグインのような形で外部ファイル化して取り込めると最高ですね。(ユーザーどうしでデザインの共有)

    gotodeploy
    @gotodeploy
    :+1:
    これ全然関係ないジャストアイデアなんですが、readmeをmarkdown化しませんか?もちろん、私が適当にやってプルリク送ってもいいですが
    ShikemokuMK
    @ShikemokuMK

    いいですね!

    っというかreadme自体 あまり更新できておらず、申し訳ないです。
    お手すきの際で結構ですので、作成頂けると嬉しく思います。

    gotodeploy
    @gotodeploy
    了解です!Tagをきちんと切っておいていただけるとreadmeの更新は抑えられそうな気がします。あと適当なタイミングでreleaseきるとか
    ShikemokuMK
    @ShikemokuMK
    了解しました!
    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
    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
    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.
    全体的に問題無さそうだけど、セーブ画面が崩れてるかな。諸々、もう少し確認します!