Git Product home page Git Product logo

Comments (9)

splhack avatar splhack commented on September 3, 2024

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.

from lwf.

janimator0 avatar janimator0 commented on September 3, 2024

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>

from lwf.

splhack avatar splhack commented on September 3, 2024

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?

from lwf.

janimator0 avatar janimator0 commented on September 3, 2024

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.

from lwf.

splhack avatar splhack commented on September 3, 2024

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);

from lwf.

splhack avatar splhack commented on September 3, 2024

Any update?

from lwf.

janimator0 avatar janimator0 commented on September 3, 2024

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.

from lwf.

splhack avatar splhack commented on September 3, 2024

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});

from lwf.

janimator0 avatar janimator0 commented on September 3, 2024

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.

from lwf.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.