Flash CC HTML5 canvasでのテキストフィールドの扱いに関して

まえがき

flashプラットフォームでゲームコンテンツを作成した際にスコア表示やステータス表示にテキストフィールドを使うと思うのですが、そのときテキストフィールドの配置の仕方によって表示がうまく出来ない事がある。少し癖があります。でも、javascriptなのでパブリッシュされたソースを確認する事で原因が分かりやすくなります。よって、吐き出されたソースを元にした解決方法。

実施例

２フレームに渡って同じインスタンス名のテキストフィールドを配置した時

配置画面

該当部分のソース

    this.frame_2 = function() {
        this.stop();
        
        this.score.text = "RESULT";
        this.winScore.text = "勝率" + Math.floor(winCount/26*100) + "％";
        //this.winScoreText.text = "勝率";
        console.log("勝率[winCount]" + winCount + "winCount");
        console.log("勝率" + Math.floor(winCount/26*100) + "％");
        /* もう一度ゲームする */
        
        this.btn_result.addEventListener("click", fl_ClickToGoToAndStopAtFrame_2.bind(this));
        
        function fl_ClickToGoToAndStopAtFrame_2()
        {
            this.gotoAndStop(0);
        }
    }

    // actions tween:
    this.timeline.addTween(cjs.Tween.get(this).call(this.frame_0).wait(1).call(this.frame_1).wait(1).call(this.frame_2).wait(1));

    // score
    this.winScore = new cjs.Text("0勝", "bold 20px 'M+ 1c heavy'", "#FFFFFF");
    this.winScore.name = "winScore";
    this.winScore.textAlign = "right";
    this.winScore.lineHeight = 22;
    this.winScore.lineWidth = 76;
    this.winScore.setTransform(81,355);

    this.score = new cjs.Text("000", "bold 30px 'M+ 1c heavy'", "#FFFFFF");
    this.score.name = "score";
    this.score.textAlign = "center";
    this.score.lineHeight = 32;
    this.score.lineWidth = 335;
    this.score.setTransform(266.5,17.5);

    this.timeline.addTween(cjs.Tween.get({}).to({state:[]}).to({state:[{t:this.score},{t:this.winScore,p:{x:81,y:355,text:"0勝",font:"bold 20px 'M+ 1c heavy'",textAlign:"right",lineHeight:22,lineWidth:76}}]},1).to({state:[{t:this.score},{t:this.winScore,p:{x:266.5,y:113.5,text:"--%",font:"bold 60px 'M+ 1c heavy'",textAlign:"center",lineHeight:62,lineWidth:335}}]},1).wait(1));

解決方法

javascriptの記述の順番をみると後のフレームのテキストの表示がthis.timeline.addTween()の設定で上書きされてしまいます。なので、前と後のフレームにはデフォルトの文字の設定は同じにする事で、p:{}のtext:"string"の設定が記述されなくなります。
デフォルトの文字の設定を削除するだけでは、何もデータが入っていない時の文字の表示がおかしくなる場合があるので、初期値として設定をするのが良さそうです。

初期値設定の例

どのような方法でも良いとは思うのですが、あくまでも一例まで・・・
フレーム１では勝った数の表示
フレーム２では全体を通しての勝率の表示

this.frame_1 = function() {
     this.winScore.text = "0勝";
         ・
         ・
         ・
     winCount++; //等・・・のカウントの処理
     this.winScore.text = winCount + "勝";
     }

this.frame_2 = function() {
     this.winScore.text = "勝率0%";
         ・
         ・
         ・
     this.winScore.text = "勝率" + Math.floor(winCount/26*100) + "％";
         ・
     }