How to test HTML5 game - html

I'm new to web development. I have a small HTML55 game for kids. I was wondering how I can test an HTML5 game? What I need to keep in mind while testing?
How I can test a loading speed? What else I need to keep in mind while testing?
Thanks!

You should keep in mind different things:
Is the game intuitive? (controls)
Is the game smooth?
Is your UI not too full of elements?
Is the user well-guided in your game, can he get stuck easily or not?
For loading speed, there is different libraries and so, but this one seems nice: https://github.com/mrdoob/stats.js

Test every browser and OS you can get your hands on. Test mobile devices as well. In fact, you should absolutely make SURE it runs on mobile. Go as far as to create specific pages designed to fit mobile screens.

Related

Why this rendering artifacts happen?

I'm developing simple mobile game for android using cordova. The game is the simple Hidden Object game where player has to find requested objects on the scene. One of my levels had very slow performance. More powerful devices worked fine. I've tried force GPU rendering using translateZ hack and got huge performance boost but, on low-end devices started wired rendering artifacts.
This screenshot is from Meizu U10. The background consists of 3 layers with position absolute, z-index 1,2,3. Objects to find (Cow, chicken etc) has same position absolute and z-index depends from background they are related to. If run game in browser on the same device, there is no artifacts and performance just great. Google did not give me any useful clues, so i will be very appreciate any guesses and tips.
Using SVG can be an option you might need to consider, specifically inline SVGs.
Using inline SVG is beneficial to the performance of a website because
it eliminates the HTTP request needs to load in an image file. Since
no file needs to download, this results in smaller loading times for a
page. This makes your website appear faster to visitors, improving the
user experience.
You should really consider using a webGL rendering engine such as PixiJS if you want to have performance in your games. You would just have to convert your images into textures.

libgdx html5 performance

I am developing games in libgdx for HTML5 deployment.
Even if my games are not demanding in terms of performance(g.e.tipical SNAKE game) I find very huge differences between clients connecting from different computers.
It seems the games are too senstive to hardware when deployed on browser.
My question:
I fear I am doing something wrong, or something js does not like. So I ask for general guidelines to avoid FPS drops on HTML. I'm trying to always use small resources (textures, audio, etc); Use TextureAtlas for icons ans small images.
Does anybody have some guideline or hints?
Thanks beforehand!

Advice optimizing kineticjs mobile game

I'm here to ask for help.
I'm trying to implement a simple Slots (casino) game for Android and iOS in html5.
My company asked me to look at frameworks that will speed up development.
So I've chosen KineticJS, because of good design and tutorials.
The project is mostly completed, but there is an issue:
it runs great on the iPad and iPhone5 but not so good in Android.
At the very least it must run on Android 2.3.
I used the kineticjs library to increase development speed and surely it helps, but the price for that is rather harsh.
I changed most of my Kinetic.Image objects to Kinetic.Shape, and it kinda helped performance a bit.
Also I stripped down some of the unused variables and now I'm using
this format: (var i =0, ln = something.length; i < ln; i++) for loops.
I realize there is also a cache but I am kinda scared of losing control, since I am still developing it.
What else can I optimize to help solve this situation?
Maybe stripping down some of the highlights and animations in Android.
The worst situation so far is the loading of the client itself on Android.
It doesn't load on first load very well, sometimes it position objects incorrectly.
Well if you know any magic tricks to speed up Kineticjs game, then please let me know.
Sorry but I can't provide a demo right now, since I am still developing and it will affect testing.
Thanks!

(Why) Should I choose Unity 3 or Cocos2d (or something third) for my app?

My colleague and me made an HTML 5 iPad game ( http://braille.gandzo.com/ ) and we would like to upgrade it, and our framweork is not enoguh, for what we want. Some of the things we would change are: graphics update, animations/"effects", multi-player, achievements and so on. The game would stay 2d. Now, as far as I understand, both Unity and Cocos would be good for this task, with Unity having the advantage of being multi-platform.
What I want to know is are there unknown qualites/"flaws" to these two programs which would influence my decision (maybe even by choosing something else). Examples that come to mind are "Unity is too complicated/has too much unneeded options/hoops because it's made with 3d in mind" or "Cocos is significantly more suited for 2d games".
If the game is pretty much in 2d... I would suggest for cocos2d. I am working on cocos2d for past 1 and half years... I don't have experience in Unity but ya my colleagues who used to work on Unity had so many problems with animation, texturing etc.
BTW I was not able to play you game on my Chrome. :)

Movable widgets over video in website

I am still very much in the planning phase on this but here is the basic idea of what I want to do. I also have not done much/any web development in the past few years so I am a little out of the loop on what will/wont work.
I want to have a video playing essentially on a background layer with various widgets on top of it. The widgets will all be fairly simple HTML based text and maybe a few images. The widget also need to be movable (eg. I need to be able to drag and drop the widgets to move them). Finally I would really like it to work on a tablet (iPad or Android).
Am I going to need to use flash or silverlight for something like this? I would rather not because I know that makes it hard to get tablets working. I know HTML5 is supposed to be the new hotness but I don't really have a good idea of its capabilities.
Flash or Silverlight will rule out tablets (the iPad anyway), not just make them hard.
I'd start with jQueryUI it supports easily making elements moveable.