Search the Community

I created a simple timeline to simulate a card unfold animation, there are 2 tweens inside it, one is changing the card's scaleX from 1 to 0.01 and another one just does oppositely. var timeline = this.scene.tweens.createTimeline(); timeline.add({targets:this.cardFace,scaleX:0.01,duration:500,ease:Phaser.Math.Easing.Cubic.Out,onComplete:function(){this.cardFace.setFrame('heart-2')}}); timeline.add({targets:this.cardFace,scaleX:1,duration:500,ease:Phaser.Math.Easing.Cubic.Out}); timeline.play(); my question is, how to ignore the tween's duration, and immediately jump to the end. in some case, I want to skip the animations but keep the ending process

Hello, is there any way to complete current tween in the timeline and then remove following tweens? I'm inserting tweens like this: tweens.push({ targets: this.sprite, x: { value: 50, duration: 1000 }, y: { value: 50, duration: 1000 } }); this.tweens.timeline({ tweens }); Then after some event I need to finish current tween and clear all following (if any). This seems to stop tweens: this.tweens.killAll(); but I can't find anything to finish current tween at first. Thanks

I'm setting up a Timeline and I'm doing something wrong. I want to do this: var oc = function () { playerMoving = false; }; var timeline = scene.tweens.createTimeline({ onComplete: oc }); but this doesn't work (onComplete is null when inspecting in the debugger and doesn't trigger). I see that createTimeline() accepts a config, uses TimelineBuilder.js, and https://github.com/photonstorm/phaser/blob/06998276ec670ceac942f44d344cea8b8af98578/src/tweens/builders/TimelineBuilder.js#L132 seems to apply that config. Seems something like the above should work. I was able to force my callback into the timeline like this: var oc = function () { playerMoving = false; }; var timeline = scene.tweens.createTimeline(); timeline.setCallback('onComplete', oc, [timeline], timeline); but this is a hack, it can't be the right way. I'm probably missing something really simple, can anybody point it out?

I've been developing a Flump runtime for Pixi.js over the last 6 months for a game I am working on. I would now like to share my library with the Pixi community. For those of you unfamiliar with Flump (a seperate project), it is a Flash animation exporter that converts your nested timeline animation to sprite atlases with keyframe data. Previously no runtime existed for PixiJS. Here are two examples of exported Flash animation running in PixiJS with Pixi Flump Runtime. Dog example Monster example Flump has been an invaluable tool in my arsenal, I hope you guys find it useful! Check out the github project for the source code of the examples. Documentation will be coming soon. It has currently been tested with Haxe projects, but I would really like some feedback on your experiences using it with Javascript. Also, thank you Mathieu Anthoine for your valuable input and testing of the library! It's been immensely useful having a second set of eyes early in the development

Hello HTML5 Game Dev forum! Just started using Pixi.js to build some animation for a client and love it! I'm wondering how everyone is transitioning their Flash animations to Pixi with a timeline? I had to come up with my own "timeline" script to keep track of when to start animating objects which was kinda difficult. Other than GreenSock's TimelineMax, are there any other viable solutions for timeline-based animation? Thanks for your time! - Patrick

I've been working on a simple canvas game and have run into a problem :/ Here it is --- http://users.sussex.ac.uk/~bc216/AXOLOTLBASS/ Here's a link to the code on github https://github.com/BB-000/Axolotl-Bass-in-Space/tree/master/js It uses the metronome example from this Web Audio tutorial http://www.html5rocks.com/en/tutorials/audio/scheduling/ Everything works fine on my macbook pro when run on my local server, however when I uploaded it live to the web it sometimes starts struggling after about 10 minutes of running the audio starts to crackle and eventually stop. I tested it on some slower laptops and it struggled a lot more - took a couple of minutes before the audio crackled / cut out and and started to lag. This makes me pretty sure it's a memory leak causing this. I did some profiling and fixed the way the entity images were handled, used a resource loading class instead of using new Image() each time. This fixed the dom node problem on the timeline : Before After But the problem still occurs, the memory usage still slowly creeps up. The memory snapshots show some image elements in the detached dom tree in red : heap snapshot - Does this mean the entity images are somehow not getting removed properly or are being duplicated still? - Or could the problem be my removal of entities using Array.splice[index] ? I've read this can cause problems but thought my game was too small / simple for this to be the case? Here is the relevant code for dealing with entities (they are spawned by pushing them onto the monsters[] array) // in the monster's update function if (this.isDead === true) { if (barNumber % this.barTiming === 0) if (current16thNote % this.timing === 0) { // Waits until it's queue to disappear and play it's sound score += this.points; this.toRemove = true; // sets to remove to true, read this could solve some problems // playSoundDelay(samplebb[this.sound], this.channel); } } // monster's render function, (thought this could be something to do with it if the image elements are the problem) render: function (ctx) { if (this.isDead === false) { ctx.drawImage(resources.get(this.monsterImage), this.x, this.y, this.sizex, this.sizey); } else if (this.isDead === true) { // if monster is dead, make it translucent ctx.save(); ctx.globalAlpha = 0.4; ctx.drawImage(resources.get(this.monsterImage), this.x, this.y, this.sizex, this.sizey); // resources.js is an asset loading library ctx.restore(); } } // One type of entity var Shark = function (position) { this.x = position.x; this.y = position.y; this.sizex = 64; ..... ..... this.speed = Math.random() * (120 - 50) + 50; this.monsterImage = "images/Shark.png"; // the url to be passed into the resource.get call }; Shark.prototype = Object.create(MonsterMove2.prototype); function updateEntities(dt) { for (var x=0; x < monsters.length; x++) { var monster = monsters[x]; monster.update(); if (typeof monster.move === 'function') { if (!monster.isDead) { // If entity is alive, chase the player monster.move(dt); } } if (monster.toRemove){ monsters.splice(x,1); // Removes the monster from the array } } Thanks in advance if anyone can point me in the right direction!! This has been driving me mad for a while!

Hi people! I am creating an animation in Phaser with TimelineLite because I want to be able to control the progress... APK generated with Intel XDK (Crosswalk): https://drive.google.com/file/d/0BzCYt2vtA7bJVXJvNGVSb2oya3M/view?usp=sharing I wonder if there is a way to reverse the animation of sprites when I revert the tween timeline... ¿Any idea to do this? Thanks in advance, Nicholls

Hi all! I'm new here, and could use some help. I've just recently gotten into Babylon.js, and I LOVE it (Thank You, creators!), but I've recently run into a problem with my game. My game requires an NPC to fly from point to point, and rotate during a certain point in the sequence so it looks like he's flying around objects such as trees & stuff. Problem is, I can only get this to position the cube (bird), and not rotate during a certain point in the sequence. Can someone please help show me what I'm doing wrong? I need to be able to loop this object as many times as I want. I have uploaded the needed files as a zip file. BezierCurve.html: <!DOCTYPE html><html> <head> <title>Bezier Curves</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <style type="text/css"> html, body, div, canvas { width: 100%; height: 100%; padding: 0; margin: 0; overflow: hidden; } </style> </head> <script type="text/javascript" src="./JS/EasePack.min.js"></script> <script type="text/javascript" src="./JS/TweenLite.min.js"></script> <script type="text/javascript" src="./JS/TimelineLite.min.js"></script> <script type="text/javascript" src="./JS/BezierPlugin.min.js"></script> <script type="text/javascript" src="./JS/babylon.js"></script> <script src="./JS/scene.js"></script> <body> <div id="rootDiv"> <canvas id="canvas_renderer"></canvas> </div> </body></html>Here is the zip file: BezierCurve.zip Thanks alot! Have a GREAT afternoon! Sincerely, Mythros

Hi ! Being a Java-developer, I am not strong when it comes to frontend. I would like to give it a shot. I would like to find a tool, I would like HTML5 to be that tool, to be able to create a canvas where I plot simple rectangles and circles in different size and colors. See this from above, a rectangle ( the canvas ) with a number of circles plotted on - no connection between the circles. I would like every object on the canvas to have a timeline ( as in implementing an interface which has stages, from birth to death, and that it grows - so the circle would start at a radius at like 5x up to its maximum at 100x and then finally vanishing to 0x , going from colour green when it is young, to blue at its max height and to red before dying and leaving space ). When a circle is painted on the canvas, it stays there - like a tree - and grows and dies on that spot. I would like to place all circles in an xml-file or csv-file or a hash like below: name: circle-1 radiusWhenBorn: 5 radiusWhenMiddle:100 radiusWhenDead:0 colorYouth green colorMiddle:blue colorOld:red birthdate : 2014-05-10 deathdate:2014-06-10Something like that, just throwing it out. Something close to 'game of life' in some sense. Would that be possible ? So If a start the timeline by creating 10 independent circles, all with their different life-timeline, growing and dying according to an algorithm. the start and end-time can be date with time but I could run it 'fast' so that I would not have to wait for a year. I guess I could do this in Java-Swing, but I would like the learning experience here as well. Hope that someone can advice me here and ge me started. regards, Ingo