I have been using phaser to make a simple game, however I have ran into a small problem with a creating a simple UI. I understand I can use javascript to create UI and add it into parts of html, however I am confused on how I can make it so that the UI will only be inside of the canvas/game and not just go all over the page.
Related
I am trying to integrate ChartJS into an Adobe Animate CC HTML5 project. Code works initially, but chart disappears once it finishes animating on. How do I get it to stay put?
See it in action here:
http://devenjames.com/cni/disappearing_chart.html
files are located here:
https://drive.google.com/file/d/1gkcRyV5rdPiTQbz-KEDth0bsaoDiJ611/view?usp=sharing
I am a novice at best trying to hack my way through this coding project. Used to use Actionscript, now trying to use Javascript in Animate CC (aka New Flash). Any help is most appreciated! Thanks!
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.
Imagine we want to create a cross-platform (iOS, Android, Win...) app using PhoneGap (and we are as expert as to know that native-apps has higher performance in contrast with using a framework but anyway we just decided to do it with PhoneGap).
The app is really simple 2 pages (LOGIN/REGISTER) and nothing more.
We are handling the login and registration process somehow with JAVA
and it's not matter for us now.
What is just matter is the performance of the user interface (including time of initializing the app and motion and transition of pages inside of the app). We implemented two pages (LOGIN/REGISTER) with HTML elements (Form, Input, ...) and there's a button for switch between two pages with sliding effect and we used jQuery mobile for that.
The question is if we all forget about he STRATEGY of using HTML
elements and jQuery mobile and instead using a new strategy which is
creating canvas and using a library like KineticJS or other similar library inside
and implementing our LOGIN/REGISTER and TRANSITIONS (slidding effect)
all inside of the canvas
.
will this change of strategy affect the performance of the app?
and if the answer is yes in which direction? The performance will increase or decrease?
I've seen this image slider on the front page of http://www.ibm.com/us/en/ and I want to have one like that for my site. (After a timeout, the first image slides out of the screen, then the second image flies out after it, and then a new pair fly in).
I've seen that IBM uses Dojo not jQuery. Is this built in effect in dojo?
I have knowledge in javascript (but not any library like jQuery/dojo) and I can make it myself the hard-way. But I wanted to know first if there is anything built in to do it?
I think you might be better off with dojox.widget.Rotator or even dojox.widget.AutoRotator.
The image slider on the IBM.com front page is built using Dojo, but not a out-of-box component of Dojo library. It's a customized component.
If you want to create image sliders using Dojo, take a look at existing out-of-box components in DojoX library (dojox.image). dojox.image.SlideShow is a good starting point.