0
\$\begingroup\$

Ok, I hope this hasn't been asked, but I could not find one, especially nothing recent.

Quick Background: I've been away from programming for a couple of years and dusted off an old project to create a browser game that is already quite functional and I would like to complete, but actually as an IOS / Android app instead of a desktop browser game.

Current Technology Used: CodeIgniter framework, PHP, SQLite, Javascript / JQuery (and obviously HTML / CSS)

Very Basics of the Game: The game itself is basically a civilization build an empire type game. The game area is a background image inside of a DIV element with spaces to build things. Once "built" the buildings are isometric images that are absolutely floated with CSS and aligned over top of the background to appear where they were built in the city. I think that paints the picture, but basically those "buildings" (floated images) are also links that open up additional dialogs and give more game functionality.

Example of game layout

My Question: Keeping in mind that other than aligning the images properly over the background image, all of the images in my game are static.

  • Should I actually be using an HTML5 < canvas > element for this task?

  • Also does the UI get wrapped in the canvas too? (that's maybe a separate question)

  • Should I use a html5 framework to work with the canvas?

  • Does any of this change if my goal is to publish on IOS / Android instead of desktop browser experience (I.e. apple review process)?

Or are both of these methods just the complete wrong approach? hah. I hope I've kept this as clear as possible and thank you for your time and input!!

P.S. I should also say my current strategy is to just keep programming it as a browser game (checking chrome dev tools to see how it looks on phone) and assume I can wrap it later. But if that's wrong I want to get ahead of it.

\$\endgroup\$
0
\$\begingroup\$

The HTML5 Canvas simply creates a rectangle in the screen, where you can draw custom graphics. It is usually preferred for games, because of the need to draw a lot of different elements, with complex animations.

Should I actually be using an HTML5 < canvas > element for this task?

In programming, usually there is no should. Can you make it work with any other technology? Then feel free to use that. From my experience however, HTML and CSS behaviour is different from android to iOS. An experienced web developer can handle that and make a consistent experience in both platforms, but that's up to you.

Should I use a html5 framework to work with the canvas?

If you want to. I've made a game in the past using only the canvas and custom javascript. It wasn't the best performance-wise because it wasn't using the GPU for accelerated graphics, but it was working.

Does any of this change if my goal is to publish on IOS / Android instead of desktop browser experience (I.e. apple review process)?

Assuming you plan to wrap your game in an app, you'd need to create a minimal android project and an iOS project, that simply take javascript code and run it. If you simply plan to publish your game on a website that mobile users can also visit, you can skip this.

Having said all that, usually game developers prefer the canvas, because a lot of video game programming is done with the output being a rectangular area, so someone who has a game already for other platforms can easily port it to an HTML5 canvas. If you only plan to make a game on javascript and no plans of porting it, you can use any technology that would work.

\$\endgroup\$
0
\$\begingroup\$

I am developing HTML5 MMO game using canvas, already 4 years. And I am still happy about my decision. Its fast enough, if i control the fps. Just the UI to be responsive, needs much coding. But with CSS responsive app is also a difficult task.

I am using no HTML5 game framework, I don't know how they perform, or they wont create more problems than solutions, also needs additional study. The good thing - if you make it responsive, it works as you coded on all devices. Not like CSS, what is different on every browser and its versions.

But old browsers don't support canvas, and CSS is supported there. It can be converted into an APP (using cordova for example). But not sure how it gonna work on ios, as I heard they dont allow HTML5 games anymore. On canvas you can easier create spec effects, nice art. I seen some nice browser city builders - they look blocky, feels old, like 20 years backwards. So, for players it can be no-no anymore in this time. html5 should by your choice, i suggest.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.