I am new to Phaser and the whole javascript games, and I am trying to add Spine animation to Phaser. Is there a way to do that?
I also tried to play my animation using Pixi.js and it worked.
Also I know that Phaser is built on top of Pixi, can access Pixi directly from Phaser or I have to add both libraries into my project and use Pixi for Spine animation and use Phaser for other tasks?
Any code samples would be very helpful.
Old but just in case someone is looking, you should try to add https://github.com/pixijs/pixi-spine
Not using Phaser but an other engine using PIXI to for rendering and I made it work, same for all "PIXI plugins".
Related
I have been learning web development for quite a while now and every time I want to animate my SVG image, I use GSAP from greensock. Do not get me wrong, I think GSAP is a great tool but I am not interested in animating using GSAP. Instead, I want to create my own library to achieve the SVG animation. The reason why I want to create my own library is to understand how the technology such as GSAP was created. For me, I am only interested in the technology and the technicality that go on behind the scene of any displayable contents. For this reason, I often create game engines and not a game simply because I am not interested.
So can anyone suggest to me on how to get started in creating my own SVG animation library? I actually been searching for hours on Google and all the information that I received is just more pre-built libraries for animating SVG which is not what I want.
Beside from creating my own SVG animation library, I am particularly interested in understanding more about the mathematics and the code behind the morph animation. In the past, I have used MorphSVG plugin but now I want to create the back end technology that drives the morph animation. Hence, it would be greatly appreciated if someone could explain to me how I can go about writing such animation from scratch.
I came across a site where they have done nice animation. I am not able to make out if they have used any tools for this or most of this is custom coding. from HTML source it seems they are using Angular JS etc..
http://viewfromabove.emirates.com/3d
I had few question regarding this site
Is it custom animation or they have used some third part tool to generate this animation
How are they animation Globe is it a 3d image or pure HTML based animation of globe.
It's using THREE.js.
It's a rendered 3D object.
It's WebGL rendering done with the THREE.js library, and audio via howler.js.
As Nick says, it's not just an animation, it's a 3D scene being rendered in the browser. It's 2016, most browsers can do that now.
I am currently using Phaser with Meteor and I want to destroy the game when I switch to another page. And create the game again when I go back.
But when I check Phaser.GAMES I see something like this:
[Phaser.Game, Phaser.Game, Phaser.Game, Phaser.Game, Phaser.Game]
And then, the canvas gets black. I've tried setting the game variable to null, tried set to null the items inside the Phaser.GAMES but had no success.
The strange thing is, when I check the source code, it shows Phaser.GAMES[this.id] = null but it keeps the value.I checked the source code (https://github.com/photonstorm/phaser/blob/master/src/core/Game.js) and I added the extra logic to destroy() missing from the version I am currently using (2.1.3) but it was not working either.
I tried to just hide it, but in slower machines, it just slows down the entire site keeping the game running.
I am using Phaser v2.1.3 | Pixi.js v2.0.0. Thank you for your help.
It was the version. I was using Phaser 2.1.3, the first version with Pixi 2.0.0. I downgraded to the version 2.1.2 and it was ok.
meteor add robertlowe:meteor-phaser#=2.1.2
This should be fixed with Pixi v3 (not out yet). I got the info from here: https://github.com/GoodBoyDigital/pixi.js/issues/1238
A good way to find problems in Phaser is to switch the canvas to Phaser.CANVAS, or to look for the issue in Pixi.
I am working on a rpg game development. My concern is- I don't want to use any image. I want to draw everything (seriously, everything..) using canvas drawing methods (lineto, bezierCurveTo, quadraticCurveTo etc.)
So, is there anything wrong or any performance overheads in it compared to using images in game development?
Please, I need guidance it this field, because this is my first game... :)
Thanks!
I have background on Canvas 2D context, but i want to perform a 3D animation like this one, is Three.js library the best choice to do such animation? Can you point me to some useful tutorial or documentation that may help. Thanx in advance.
That's one of the most common choices.
As WebGL enables OpenGL without the need for libraries, you might also do it with just Vanilla JS but that would be harder as WebGL doens't offer much more refinement over the raw and crude OpenGL.
Apart three.js, you could also try GLGE or PhiloGL but as Three.js is the most popular I would recommend to go for it if you have no specific requirement.
Looks like the demo you linked to is using a canvas library called Clay.js. Not one that I've personally heard about until now. For 3d in canvas the most popular one I know of it Three.js as you already mentioned. It has the benefit of supporting webGL as well (browser based openGL variant).
Three.js has limited documentation and some examples but outside of some books you may buy there isn't a lot of hand holding. You basically need to dive in and start coding. Here are some online resources that may help you get started (not necessarily all focused on THREE.js):
http://aerotwist.com/tutorials/getting-started-with-three-js/
http://learningthreejs.com/
http://learningwebgl.com/blog/
To make it easier to work with THREE.js Jérôme Etienne created a project called tQuery which you can think of kinda like jQuery. A wrapper to make it easier to get your hands dirty. Here's a video where he shows how to create a webGL game in 10 minutes.