Pex Textbook 1.1.0 documentation

参考 実践的ソースコード

«  再生スピードをコントロールする   ::   Contents   ::   Pex で会話シーンを作ろう  »

参考 実践的ソースコード

サンプル実践コード

ここまでは、チュートリアルとして理解しやすい形を意識して、簡潔なソースコードの動作サンプルを紹介してきましたが、 実際のプロダクトでは、もっと色々と細かい部分まで気を使ったコードを書かなくてはならないでしょう。

内容の詳しい解説は省きますが、推奨されるコーディングをおこなったソース例を下記に提供します。 テンプレートとして使う、より良い状態に改良するなど、おのおので活用してみてください。

動作サンプル: samplesource.html

flaファイル: sample.fla

画像と SWF を同時に読み込んで、pexに反映させています。

参考: Flow.js について

イメージのロード待ち、SWF 自体の読み込み待ち、他にも様々なデータのロードなど‥ 非同期処理がいくつも組合わさってくるとソースコードの見通しが悪くなりがちです。

そのような場合には、処理の流れを簡潔にまとめてくれるユーティリティー等を使うと良いでしょう。

1つの例として uupaa 氏作成の Flow.js を紹介します。

説明スライド : http://www.slideshare.net/uupaa/flowjs

ソースコード配布先 : https://github.com/uupaa/flow.js

コード例

<script src="flow.js"></script>
<script>

        var images = ["img1.png","img2.png","img3.png"];
        var flow = new Flow(images.length, startPex);

        for (var i=0; i< images.length;i++) {
                var img = new Image();
                img.onload = function(){flow.pass();}
                img.src = images[i];//image読みこみ待ち
                images[i] = img;
        }

        var pex = new Pex(swfpath,canvas,{"stopOnStart": true});//SWF読みこみ待ち
        pex.getAPI().ready(
                function(){flow.pass()};
        );
        flow.extend(1);

        function startPex(err,args) {
                if(!err)
                {
                        pex.getAPI().engineStart();
                }
        }

        flow.extend(2);

</script>
<script src="spam.js" onload="flow.pass()" defer="defer"></script><!-- js読みこみ待ち -->
<script src="egg.js" onload="flow.pass()" defer="defer"></script><!-- js読みこみ待ち -->

«  再生スピードをコントロールする   ::   Contents   ::   Pex で会話シーンを作ろう  »