Disappointment and obstacles

I know I am expecting too much!

I have this great idea of making a game with hand drawn graphic as background. Imagine a long vertical strip, think Bubble Bobble but going up instead for down when think of level change.

The graphic is about beginning at the surface, at the very bottom.. grass, mushrooms, travelling up, to trees, then oh a lake, then again, land, then up in sky, further up in sky clouds, then yeah you get it... all the way up to the space and moon!

But yes.. graphic intense!

Oh the game is kind of break out style but with some twists and different approach for lives and losing.

That graphic I haven't drawn yet but I have done sketches on paper. I have placeholder graphic now.

The screen is 1024x768, and the play area is 768x768 square but the background cover the entire screen. Gui to left and right, also serving as "touch" areas. The Layout is taller than that, right now 20 levels high so 20x768, and the position is set by scroll to sprite a big sprite the same size as the screen size. Using LiteTween to the change level and I love it.

On my computer it works nicely. No problems.

When I tested the same game on Safari on my ipad, the background is gone, and the game is slightly slower but playable. But hard to play because of I am not able to remove the bar at top, it is not possible to use safari in fullscreen mode.

Now I thought, eh better to try out the basics properly.

At first I was going to use MobileGap but I did not understand any thing about the signing process. Ok, I have a macbook I can borrow for the signing part. But where to get the certificate? The file prepared?

Scrap that.

Go to CocoonJS instead. Ok. Uploaded the zip file to my site, installed Cocoon app on my ipad. Started the game... oh omg, only 5 fps! NOT playable. And lots of glitches too.. .It is so insane compared with Safari! And this still persist when I removed the background altogether.

I then looked at app store for browsers that support fullscreen, installed a few of them but apparently Safari is best optimized.

What do you think? Should I give up my idea? Or maybe only for web? And make another style game for ipad instead?

Small ideas I have: make the level strip a little shorter. maybe 10 or even only 5 levels high at a time, and have a kind of intermission game (maybe to collect extra lives) between the layout strips.. hmm.

Apple doesn't allow third party browsers. All of the others available are based off of Safari, including Chrome.

I have never had the opportunity to try to go with the native route since Apple only has one method, and that requires a license.

However I'm fairly pleased with the performance with "Add to home screen" on my Ipad 3.

Someone really needs to start pushing people to use that method.

Funny that about the Safari thing because the other browsers are slower and Safari has best performance. Could be other things too...

I actually tried the Add to home screen route quite quickly remembering my iphone, but on my ipad it still retains the browser bar. Either it is my ipad4 or it is the new i0S....

I will be blunt.

If you want near perfection on desktop and mobile, Flash is your solution. It works consistently on all mobile devices. It lets you do sounds, visual effects, and more without worry. It is high performance (compared to HTML5), and it has been for many years now.

It simply works.

HTML5 is still very, very new, and your results will be inconsistent at best. Your experiences are normal, and don't expect it to get any better soon.

See the biggest problem with HTML5 is it relies on technology companies working together. LOL! LOL! Sorry, but I couldn't complete the last sentence without laughing. Let me continue.

If you want to develop HTML5 games with the minimum of fuss, HTML5 isn't yet the way to go. Stick with Flash, and experiment with smaller HTML5 games on the side until the technology fully matures.

P.S. Your game sounds wonderful and refreshing. We need more artists like you making games. Don't give up, OK?

Steve

Flash doesn't work on Ios.

/edit thanks Newt.. I thought so)

And IIRC Apple does not support Flash at all on their portable devices (Ipads and Iphones) .. Or does it? I never had Apple product (besides apple II) so I can't tell for sure.

Yes it does Newt, and well. All you do is compile for Air and it works natively.

It is funny Joannak, I was under the same impression. Maybe that is why so many people made the jump to HTML5. LOL!

I wrote a long nice reply, and of course error message.... <img src="smileys/smiley7.gif" border="0" align="middle" /> <img src="smileys/smiley11.gif" border="0" align="middle" /> Have to start to remember always do ctrl+C! (however I wish Scirra could code so that the text could be retained even if error message is shown. some sites do that)

But I want to thank you all for your replies, both the bluntness and the encouragements.

I will write again later or tomorrow, so tired now.

helena I like the graphics you have made, it may well be that there's some detail in code (or iOS tools) that cause unnecessary slowdown and can be eliminated. It may take some effort but I'm quite sure it's nothing totally impossible.

stevefromio Oh.. Apparently so: adobe.com/devnet/air/air_for_ios.html Well, live and learn. Not that I'd be any more keen on having those thingies, but it's still good to be informed.

Adobe Air ehh?

Somebody tell Facebook to get on that right away.

All browsers on iOS aside from safari use the web view - which is basically a crippled version of safari that doesn't have JavaScript optimization, so everything that uses JavaScript, like c2 games, is much slower. Same thing with a web app saved to the home screen.

Also, remember that mobile devices are nowhere remotely near as powerful as desktops. They have very little processing power and memory in comparison - even if you were coding in raw assembly, there's just some things they cannot do. AFAIK, iOS devices can't handle textures above 2048x2048 and start having to resort to tricks to stitch large images together, an example of which being how Safari is known to either reduce the resolution of images or not load images at all that are too tall, which sounds like might be happening in your case with the background. You might also be asking too much from the CPU, via too many collision checks or physics or something.

You also might be having overdraw problems, as the graphics card can only calculate so many pixels per second. Many devices are only able to draw each pixel on the screen three times per frame at 60fps - and that's only fully opaque ones, transparent ones require more calculation. Fully transparent pixels in a texture count towards the pixel fill rate, too - they also are processed by the gpu.

There are ways to improve memory use and such: I suggest start by reading this: https://www.scirra.com/blog/112/remember-not-to-waste-your-memory

Arima,

Time to give up on the, "The mobile devices are nowhere near as powerful as desktop" excuse. For an amazing example of how much power they have, check out Epic's Citadel app in the App store.

stevefromio: Yeah, mobile devices can do 3D render. Great.

Nevertheless, Arima's right, those textures aren't bigger then 2048X2048.

It's even unlikely that there are this size.

Also, it's indeed a nice tech demo, but it's not a game. It doesn't have IA calculations, collision checks, etc...

Mobile devices don't have as much power as modern desktop computers, it's not an excuse, it is a fact.

Boundaries are being pushed, sure, but still if you want to make a game for mobile, design it for mobiles. If you want to make a game that take advantages of decent modern desktop computer, design it for modern desktop computers.

Those are different beasts with different limits and ways.

Once again, read the blog article Arima has linked at the end of his post to understand a bit more about all this.

Ipad4/iPhone 5s: 77 GFLOPS

Geforce 9800gt: 504 GFLOPS

Nvidia TITAN: 4,500 GFLOPS

As Kyatric said, it's not an excuse, it's a fact. My graphics card from almost 6 years ago is still slapping some of the latest tech in the mobile world silly in terms of performance, and the latest desktop cards are running circles around my 9800gt. Most people don't even have the latest tech, either, often still using things like the iPhone 4S which are significantly weaker.

It is possible to get good looking graphics on mobiles, but concessions must be made: lower resolution textures, less intense code, less polygons, ways to fake higher level features at reduced image quality. The citadel demo was restricted in the same manner. Believe it or not, 2d games can actually be harder for a gpu to render on mobiles than 3d because of the fill rate, which is one of their weak points. If you have two sprites overlapping each other, then the area that is overlapping is drawn twice. That's overdraw. When you've only got 3 passes of the screen to work with, it's very, very easy to go above that. Also, transparent pixels are more expensive to calculate, and while 3d objects are generally opaque, images often have lots of transparency, making it worse.

I'm not trying to claim the situation on mobiles for c2 is perfect (referring to cocoonjs here, I haven't tried crosswalk for android yet). A perfect example is the lack of memory management - if the game described by helena was coded natively, the texture could be split up and it could be coded to load the necessary segments of the background and dump the unneeded ones, keeping memory use low. As with everyone else - finding ways to work around the hardware limits to achieve a certain effect.

If cocoonjs implements memory management, then at least the very tall background could be implemented.