Comments (9)
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.
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.
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.
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.
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.
Any update?
from lwf.
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.
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.
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)
- OnEnterFrame not working on low FPS flashes? HOT 2
- Non-movable buttons HOT 5
- Text Filters in Unity HOT 1
- Getting LWF.Bounds of a LWF.Movie immediately HOT 1
- Updating the flash with a delta time of 0 still calls OnEnterFrame
- Disabled buttons still blocking mouse events
- TextProperty in Unity
- Changing the ColorTransform of a LWF.Movie HOT 1
- Blending modes
- SetText() not always rendering new value HOT 2
- fscommand ignored unless frame entered "naturally" HOT 1
- I got a data file(.lwf) used this tool(swf2lwf.rb).But I cannot use in the unity.
- Warnings
- No longer rendering timeline HOT 3
- Text fields are not respecting the alpha of the MovieClip that contains it
- flash-in-unity.net
- can you support spritekit?
- Shapes Support
- Locate error cause easily when converting swf files
- Bad link HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from lwf.