Search the Community

I am making UI Components Framework for Phaser 3, that is driven by JSFL-generated jsons and atlases. It means that you can build your UI in Abode Animate, export it with given script, and forget about manual code positioning and building stuff! Please, try it out. https://xense.github.io/phaser-ui-comps-docs/tutorial-showcase.html Docs, examples, tutorials: https://xense.github.io/phaser-ui-comps-docs There are two basic things in this framework. First is ComponentClip, which is a view instance, it is recursively self-build by provided json and atlases. Second is UIComponentPrototype, which is clip controller. It can be easily extended to create any components, windows or whatever you need. Essential meaninig of it is that it doesn't need a clip to exist always. For example, you can change states of a root clip, and child clip can get new clip instances, ore lose them, and nothing bad happen. Some base components are already included UIButton has 4 states, "up", "over", "down", "disable" UIButtonSelect same as button, but behaves like checkbox, has 8 states, by adding "_select" suffix to UIButton's states when selected. UIButtonRadio Selectable buttons, that can be grouped to select only one of them. UIButtonDraggable same as UIButton, but also emits drag event, drag bounds can be self externally. UIScrollBar vertical or horisontal bar with draggable thumb and prev/next buttons. UIProgressBar Setup only start and end elements positions, scale, rotation or alpha, and this component will interpolate them according to provided progress value. UIScrollPanel Helper for scrolling any element with UIScrollBar. UIContainer Base container component to add other dynamically created components inside. Can be easily extended to create any types of lists, for example. I'm still working on new components and extending existing functionality. Tell me, would you use it, what other components you may need, and whatever you think about it. Any feedback is appreciated! Also I'll be thankful for any collaboration. Available at GitHub and npm

https://github.com/Hocti/PIXIMC you don't need any adobe animate plugin, just use the "generate texture atlas" function in adobe animate then you can read them in to pixi.js by PIXIMC. Here is a pixi.js demo: https://piximc.s3.amazonaws.com/demo/demo_scene.html and the original swf file: https://piximc.s3.amazonaws.com/demo/demo_swf.html I reproduce almost all animation and graphic functions, but it's not my final goal still. I will make some extra functions that adobe doesn't provided: 1) changing MC skin 2) playing with "action" like spine So I can draw some Stickman animations to create game sprites in a super quick way , and maybe find a better illustrator to redraw it as a new skin I hope someone will find it useful.

Hello, I have a mesh (an airplane) which needs to be cloned 20 times - and then all 20 clones require their propeller to animate at different speeds and times. How do I identify each propeller or assign a variable (preferably a slot in a "propeller" array) to each cloned propeller to animate - once again animate separately. When I clone each airplane, how do I know the name of each child on the parent mesh, and animate it's children such as the propellers? How do I assign a unique name to each one? Once I have a unique name or variable assigned to each, then I can animate each one separately - but I don't know how to "Get" the names of cloned meshes or assign to a slot in an array upon cloning. Any ideas? DB

Hey dudes So I'm continuing along with my 3d project and I've been building a prototype scene in babylon in order to test the final experience and make a few decisions. Part of my test scene involves a helicopter going around in a circle, so in blender i created a bezierCircle, parented the helicopter to it and set the parenting mode to follow path. In blender this works great when running the animation. The big problem is of course (I soon discovered) that the babylon exporter does not support beziercircles and therefore ignores the path and the helicopter model (since it is now a child object of the beziercircle). So my question is; what is the expected way to set up things like follow path animations in Blender such that the babylon exporter will support it and babylon can play the animations automatically? Cheers!

Hello there, I'm new to phaser and the first thing I had a minor quip with was the way animation calls were handled (they look messy and unorganized). I have experience coding in engines such as Vylocity ( http://vylocity.com ) where icon states are handled and managed by the direction the player/npc has chosen to go in. A player is set with an icon "state" which is a specific type of animation, each with its own directional states spit up (with the same number of states for each direction). This state references a file that is icons from a number to a number that those states are bound to. Here is an example of how the icon file looks, and i was wondering if there'd be an easy way to split up these images manually in code by specifying where each direction is, and then storing the file that they are referenced to as a string that would then be called. Then to set a character's animation, you would call this function that assigned the animation to it, grab the direction, and select the chosen section of the png file that contained that character's movement state. Maybe if I were to reorganize the icon file into something a bit easier for the engine to keep track of it wouldn't end up messy code-wise, especially when I needed to edit something. I could just split up each character direction into it's own file - the initial state would be for inactive movement while facing that direction, while the rest of the states would play while moving (e.g. while the key is being held) Can I get some idea on how I'd go about coding this. or if there already exists a library that simplifys animation calls.

Hi there, Here is the first version of GAF Player for PixiJs. If you know Flump or Dragon Bones, take a look at GAF, it's so much more powerful !!! https://gafmedia.com/ At the moment, GAF Player for PixiJS is available for Haxe-Pixi but I will deliver a pure js lib soon . https://github.com/mathieuanthoine/PixiGAFPlayer Enjoy PS: I'm really interested in bug reports !

EDIT: somebody has been hired, sorry for not updating this!!! I need someone to convert an existing dress up game made in Animate CC, into javascript/html5 keeping it WITHIN the .fla file. If you email me with an intro and some examples of having converted or coded something similar, I'll send you the .swf to give you an idea of the complexity, and hopefully we can work out a price? This one was made with html5 in mind, so it's graphically simple. I have some older games too that are a nightmare, but if someone's down for a challenge, there's that too.... [email protected] ~OLa

Hi, I made 3 music machines (with Adobe Animate), just click on the characters so that they play the instrument. No score, levels, difficulty, just enjoying making music easily http://www.zanorg.com/musicmachines/country To play other machines, just click the "+" in the top left. Hope you'll enjoy ! kek

Hi everyone, I'm extremely excited to share my latest side project with you. I call it aape. It is my version of an Adobe Animate PixiJS exporter. Here are two demos of exported animations: davidochmann.de/content/html/aape/aape.html davidochmann.de/content/html/aape/runner.html How it works: The project is split into two parts. A JSFL script to export your current Animate timeline and a few JS classes to download and display the animation. Your animation is build as usual. The only difference being that you have to explicitly tell aape which part of the animation should be exported as Bitmap. This is done by selecting the MovieClip in your Animate library and changing it to a Graphics object. MovieClip labels and comments are also exported and can be used by executing the familiar gotoAndStop / gotoAndPlay methods. After building your scene you execute aape form the toolbar. The export starts with the currently open MovieClip as root element. A simple export generates three files. A PNG Atlas + JSON file containing image locations and a JSON object that describes the exported timeline (the library). The files can than be loaded and added to the aape.Timeline object. It's prototype is the PIXI.DisplayObject. So you can easily add it to your existing display list. The exporter currently doesn't parse vector graphics. The tool is not yet finished. I'm still working on the Animate user interface and export options as well as a proper documentation. I also haven't decided how I'm going to publish aape yet. What du you think? Is this workflow still relevant to you? I'd love to get your feedback. Cheers, David

When I export sprite sheets from Adobe Animate CC (and until today, Flash CC) they don't work. I can download other people's sprite sheets and they work fine. I also exported one from another machine's Flash CC program and *that* worked fine. Does anybody know if there's a common issue with Flash/Animate that makes sprite sheets not work? I'll attach my sprite that isn't working.

Hello, I'm trying to animate clones of an object but with a delay between animation. You can find a test here : http://www.babylonjs-playground.com/#ACLYP#1 But as you can see, the delay between animation is not constant, after the first loop, all animation are not sync, how can i keep the same delay after all the loop ? Maybe it's not the right way of doing this, can someone help me with this ? In this configuration I can keep the delay between animation but some of them never end : http://www.babylonjs-playground.com/#ACLYP#2 Thanks !

Hi, I'm wondering if it's possible to animate the parameters of a RetroFont and render this back to the image using it. create: font = this.game.add.retroFont("yellowredfont",8,7, '!"#$%&\'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`<|>~£@',35,6,7,0,0);font.multiLine=truefont.customSpacingX=8img = this.game.add.image(20, 50, font);font.text = "Hello World!"update: font.customSpacingX = (font.customSpacingX+1) % 20// how to update the image with the updated font? does it all have to be destroyed and recreated?thanks j

Hello to all. I created Dante in Blender. I animated it with Mixamo. Unfortunately, when I go to convert the dae file into a babylon file, I can't see the animation. Can you help me ? This is the animation done with Mixamo: This is the result in the sandbox: I attach the following files in the zip: - Dante.dae (Mixamo animation) - Dante.babylon Thanks in advance. Dante_cammina.zip

I would like to animate my camera from current position to another pre-determined position. Mattx264 posted the following function in 2014 According to Mattx264 function, how does the script know where the end position is located? Does toAlpha, toBeta, toRadius recieve a number? If not, how does the code know where the end value of these parameters are? Can anyone demonstrate this code in the playground? I dont understand how the end position of the radius, alpha, and beta are located in the script. There is no variables declared about them. Thanks, ah BEST ANSWER mattx264, 23 April 2014 - 04:20 AM Thank you @Deltakosh. I wrote this function, may be it will help somebody. var ArcAnimation = function (toAlpha, toBeta, toRadius,position) { var animCamAlpha = new BABYLON.Animation("animCam", "alpha", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE); var keysAlpha = []; keysAlpha.push({ frame: 0, value: camera.alpha }); keysAlpha.push({ frame: 100, value: toAlpha }); var animCamBeta = new BABYLON.Animation("animCam", "beta", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE); var keysBeta = []; keysBeta.push({ frame: 0, value: camera.beta }); keysBeta.push({ frame: 100, value: toBeta }); var animCamRadius = new BABYLON.Animation("animCam", "radius", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE); var keysRadius = []; keysRadius.push({ frame: 0, value: camera.radius }); keysRadius.push({ frame: 100, value: toRadius }); animCamAlpha.setKeys(keysAlpha); animCamBeta.setKeys(keysBeta); animCamRadius.setKeys(keysRadius); camera.animations.push(animCamAlpha); camera.animations.push(animCamBeta); camera.animations.push(animCamRadius); scene.beginAnimation(camera, 0, 100, false, 1, function () { }); }GO TO THE FULL POST

helo. can i find a better solution for animate 1 tile at the background? can i add animation only for 1 tile on a layer? map = game.add.tilemap('pina');map.addTilesetImage('tile','levelPng');layer2 = map.createLayer('Tile Layer 2');var time= 100;update(){ if (time < 0 ) { time = 100 map.replace(10, 11, 0, 0, 32, 32, layer2); } else{ time--; } }