Question: Rendering Multiple LWFs Html5. #53

janimator0 · 2014-01-21T13:45:11Z

I've been attempting to render multiple LWFs using html5 without success for a while now.

The only result I've been able to achieve is attaching one LWF to another via ".attachLWF()", but using that technique I seem to loose the ability to sort the seperate LWFs on the z depth, so I can have the ability to determine which lwf is placed ontop of the other.

The main problem is when I try to render more then one LWF only the last lwf gets rendered.

Help would be much appreciated. The main parts of my code are: (this is just sorta pseudo code)

var lwfFileName = ["0.lwf", "1.lwf","2.lwf"]; //list of lwf files im using
var lwf = []; // Store an array of LWF objects
var lwfObjList = []; // Allows me to control position/scale properties of each individual LWF.

for (i in lwfFileName.length){
   lwfCache.loadLWFs( lwf:lwfFileName[i]  ,stage:myStage  ,onload:handleLoad)
}

function handleLoad(l) {
   lwf.push(l);
   lwfObjList.push(l.rootMovie);
}

function tick() {
   for (i in lwf){

      lwf[i].depth = i; // I assume this will overlay the the lwfs based on they're position in the array. Never was able to make this work.

      lwf[i].exec();
      lwf[i].update(); // because I disable update
      lwf[i].render();  // The main problem is here. Only one lwf gets rendered at the end on this loop.
   }
}

The text was updated successfully, but these errors were encountered:

splhack · 2014-01-21T15:53:20Z

Are you using Canvas or WebGL renderer? Add needsClear:false to loadLWF parameter. LWF doesn't clear the screen at all. So you need clear the screen yourself or set needsClear:true to the bottom LWF.

janimator0 · 2014-01-21T16:59:05Z

I am using Canvas. I tried adding needsClear:false and there was no change in the result animation. Still only the last lwf gets rendered overwriting all the previous lwfs.

I posted a stripped version of my code, I hope you don't mind. It might help debunk the issue.
In the botton of the program you can specify up to 3 .lwf files to play, but unfortunately only one gets rendered. I can provide animations as well if it helps.

<!DOCTYPE html>
<html>
<head>
    <title> LWF Tests </title>
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;">
    <script src="lwfLoader/lwf_debug.js"></script>
    <script>
        //console.log(lwf);
        var lwf = []; // stores the lwf data
        var lwfCache;
        var lwfObjList = [];
        var isDesktop = !(location.search && location.search.length > 0);
        var STAGE_W = isDesktop ? 800 : window.innerWidth;  // width of stage
        var STAGE_H = isDesktop ? 600 : (window.innerHeight * 2 / 3 >> 0);  // Height of stage.
        var lastTime; // used for unit
        var myStage;
        var lwfFileName = [];
        var frmRateValue;
        var settingsArr = [];

        // Controls the frame rate
        if (window.requestAnimationFrame == null) {
            var vendor, _i, _len, _ref;
            _ref = ['webkit', 'moz'];
            for (_i = 0, _len = _ref.length; _i < _len; _i++) {
                var vendor = _ref[_i];
                window.requestAnimationFrame =
                    window[vendor + 'RequestAnimationFrame'];
                if (window.requestAnimationFrame != null) {
                    break;
                }
            }
        }
        window.requestAnimationFrame = null;
        if (window.requestAnimationFrame == null) {
            lastTime = 0;
            window.requestAnimationFrame = function(callback, element) {
                var currTime, id, timeToCall, timeoutCallback;
                currTime = new Date().getTime();
                if (lastTime === 0) {
                    lastTime = currTime;
                }
                var frameRate = (1 / frmRateValue) * 1000
                timeToCall = Math.max(0, frameRate - (currTime - lastTime));
                timeoutCallback = function() {
                    return callback(currTime + timeToCall);
                };
                id = window.setTimeout(timeoutCallback, timeToCall);
                lastTime = currTime + timeToCall;
                return id;
            };
        }

        // init canvas, load lwf
        window.onload = function() {
            myStage = stageInit("myCanvas");
            LWF.useCanvasRenderer(myStage);
            lwfCache = LWF.ResourceCache.get();
            checkAndAddVar();       
        }

        function stageInit(myCanvas){
            var tmpStage =  document.getElementById(myCanvas);
            tmpStage.width = STAGE_W;
            tmpStage.height = STAGE_H;
            tmpStage.style.width = STAGE_W + "px";
            tmpStage.style.height = STAGE_H + "px";
            return tmpStage;
        }

        function checkAndAddVar() {
            lwf = [];
            settingsArr = [];
            lwfFileName = [];

            // store the frameRate to use
            frmRateValue = Number(document.getElementById("frmRateObj").value);

            // store the lwfs to use
            for (i=0;i<10;i++){
                try{
                    // check if variable element exists
                    str = "lwfFileNameObj"+i.toString();
                    lwfFileName[i] = (document.getElementById( str ).value);

                    //if field is empty then skip everything after
                    if (lwfFileName[i] == ""){
                        break;
                    }
                }
                catch(err){
                    break;
                }

                var settings = {
                    lwf:lwfFileName[i],
                    stage:myStage,
                    onload:handleLoad,
                    needsClear:false
                }
                settingsArr.push(settings); 
            }
            lwfCache.loadLWFs( settingsArr, handleLoadAll);
        }

        // adds lwf to array
        function handleLoad(l) {
            lwf.push(l);
        }

        function handleLoadAll() {
            generateLwfObj();
            requestAnimationFrame(tick);
        }

        // Gets called when new value is entered.
        function generateLwfObj() {     
            for(var i = 0; i < lwf.length; i++) {
                var lwfo = lwf[i];

                var lwfContainer = lwfo.rootMovie;
                lwfContainer.stop(true);
                lwfContainer.x = STAGE_W/2;
                lwfContainer.y = STAGE_H/2;

                lwfObjList.push(lwfContainer);
                lwfo.exec();        
            }

        }

        //resets the location of the lwfsprites 
        //Main Loop
        function tick(event) {
            for (i = 0; i < lwfObjList.length ; i++){
                var lwfContainer = lwfObjList[i];

                lwfContainer.gotoAndStop(lwfContainer.currentFrame + 1);
                if (lwfContainer.currentFrame > lwfContainer.totalFrames){
                    lwfContainer.gotoAndStop(0);
                }
            }
            lwfUpdate();            
            requestAnimationFrame(tick);
        }

        function lwfUpdate () {
            for (i = 0; i < lwf.length ; i++){
                var lwfo = lwf[i];
                lwfo.exec();
                lwfo.render();
            }
        }

    </script>
</head>
<body>
    <canvas id="myCanvas" style="background: black; "></canvas>
    <p>LWF File Name : <input type="text0" name="MyName0" value="0.lwf" id="lwfFileNameObj0" size="16" maxlength="16"  onchange="checkAndAddVar();"><br>
    <p>LWF File Name : <input type="text1" name="MyName1" value="" id="lwfFileNameObj1" size="16" maxlength="16"  onchange="checkAndAddVar();"><br>
    <p>LWF File Name : <input type="text2" name="MyName2" value="" id="lwfFileNameObj2" size="16" maxlength="16"  onchange="checkAndAddVar();"><br>
    <p>Frame Rate : <input id="frmRateObj" type="number" step="10" value="30" min="0" onchange="checkAndAddVar();"><br>
    <div id="containerStats"></div>
</body>
</html>

splhack · 2014-01-21T18:23:27Z

I didn't check your code, but LWF should work in such case. Could you check your code using Chrome Developer Tools, add breakpoints at LWF.prototype.render and CanvasBitmapRenderer.prototype.render?

janimator0 · 2014-01-21T19:45:29Z

I've tried stepping through the code with no success.
I'm pretty sure the problem is related to me creating 2 separate lwfs.
and calling the render on them separately.

lwf1.render();
lwf2.render();

Tomorrow I will be able to ask a friend who has more web dev experience to look into anything you can suggest.

splhack · 2014-01-21T20:03:28Z

There is another option. Use Movie.attachLWF method and Movie.swapAttachedMovieDepth for z-sorting

var lwf1 = lwf.rootMovie.attachLWF("1.lwf", "lwf1");
var lwf2 = lwf.rootMovie.attachLWF("2.lwf", "lwf2");
lwf.rootMovie.swapAttachedMovieDepth(lwf1.depth, lwf2.depth);

splhack · 2014-03-06T02:40:29Z

Any update?

janimator0 · 2014-03-06T04:05:03Z

Unfortunately not. I was not able to figure out a solution. I spent quite a bit trying. I would love for there to be a quick example demonstrating how to implement multiple lwfs with designated z orders.

splhack · 2014-03-06T05:16:16Z

Haven't you tried this example?

var lwf1 = lwf.rootMovie.attachLWF("1.lwf", "lwf1");
var lwf2 = lwf.rootMovie.attachLWF("2.lwf", "lwf2");
lwf.rootMovie.swapAttachedMovieDepth(lwf1.depth, lwf2.depth);

you can specify the depth in attachLWF

var lwf3 = lwf.rootMovie.attachLWF("3.lwf", "lwf3", {depth:3});

janimator0 · 2014-03-06T15:44:33Z

Unfortunately that starts becoming a convoluted solution when I have 10 lwf objects on screen. Also it seems that in order for me to display 2 lwfs together I have to combine them, and was not able to load lwfs seperatly when needed.

This may be because my lack of understanding of how lwfs work, or maybe I'm just doing things terribly wrong. When starting with LWF I was hoping to have a system that loads lwfs on demand when i need and to be able to control there position separately and their z-order on demand. Might be asking a lot for what html5 can do with lwfs.

splhack closed this as completed Mar 11, 2014

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Question: Rendering Multiple LWFs Html5. #53

Question: Rendering Multiple LWFs Html5. #53

janimator0 commented Jan 21, 2014

splhack commented Jan 21, 2014

janimator0 commented Jan 21, 2014

splhack commented Jan 21, 2014

janimator0 commented Jan 21, 2014

splhack commented Jan 21, 2014

splhack commented Mar 6, 2014

janimator0 commented Mar 6, 2014

splhack commented Mar 6, 2014

janimator0 commented Mar 6, 2014

Question: Rendering Multiple LWFs Html5. #53

Question: Rendering Multiple LWFs Html5. #53

Comments

janimator0 commented Jan 21, 2014

splhack commented Jan 21, 2014

janimator0 commented Jan 21, 2014

splhack commented Jan 21, 2014

janimator0 commented Jan 21, 2014

splhack commented Jan 21, 2014

splhack commented Mar 6, 2014

janimator0 commented Mar 6, 2014

splhack commented Mar 6, 2014

janimator0 commented Mar 6, 2014