PDA

View Full Version : A basic 2D Text/Image Game



Billybob 001
06-17-2010, 09:13 PM
I have a question, where would be the best place to start to create a game for mobile users. This will be a multiplayer mobile game.
How you would move on the map, would be from a link going north east south or west. The game will be browser based and require
a reload to move the character over one space. The setup for this game would be something like this...

72x72Image

HP:XX
Mana: XX

North
East
South
West


This is where things start to puzzle me though, How would I create a map that they could move up and down on. Mobile phones are very very
limited so the image would be 72x72. I have an idea of one thing. I create a whole bunch of small 8x8 images.
Such as player(your character moving in game.) the ground, mountains etc. In the end it really wouldnt be that many pictures.
Now how would I be able to combine them/duplicate them as needed to create a small map.
When I say 72x72 pixel image, thats just the piece of the map at the time that I want to display. In reality the map would be bigger. Here is an example
of what I mean.

ground
http://cosmicshade.x10hosting.com/images/caveground.gif
cavewall
http://cosmicshade.x10hosting.com/images/cavewall.gif
player
http://cosmicshade.x10hosting.com/images/Player.gif

turn them 3 small 8x8 images into something like this.

MMMMMMMMM
MMMMMMMMM
M--------
M--------
M---P----
M--------
M--------
M--------
M--------
HP: xx
Mana: xx

north
east
south
west

aka

http://cosmicshade.x10hosting.com/images/imagemade.gif
HP: xx
Mana: xx

north
east
south
west

Things you need to consider are that this game should be playable from ANY phone. That includes old ones. This is the reason why I think I should go along the lines of something
text based, then have something convert the text into image. So that way an option to have image or text would easily be able to be implemented. Any ideas? Thanks in advance.




**EDIT** I have edited my question on this thread to further explain what I am trying to look for.
**EDIT2** I can make many different things in the game. I just made that image so you would get the example.

Frement
06-17-2010, 09:29 PM
So, what are you asking exactly?

Ogre
06-17-2010, 09:33 PM
I think he's asking for suggestions on what language to use to make a browser-based game, and suggestions on what else he can add to the game.

Billybob 001
06-17-2010, 09:36 PM
I think he's asking for suggestions on what language to use to make a browser-based game, and suggestions on what else he can add to the game.

Thats pretty much exactly what I am asking lol. The reason for posting so much stuff I could add to it was just so you could farther determine what would be the best programming language to use for this particular type of game.

Craig`
06-17-2010, 09:44 PM
well, there's 3 options, but I'd strongly advise not using one of them.

first of all you could use flash, and this is the option I'd advise not using, you want reasons why not? google for reasons there's no point me repeating what's already been said.

the second option is using Scalable Vector Graphics (http://www.w3.org/TR/SVG/).
I really like SVG because each shape is an element, and thus you can directly manipulate it using javascript, I did have some examples of what I've achieved with SVG but I don't at this moment in time, however I am working on some.

note: svg does not natively work with internet explorer (any version, though in version 9 it will be supported), to get it to the user has to have the adobe svg plugin installed, and instead of just having a svg document you have to embed it into an HTML document using the object/embed element (note embed is not defined in any HTML speficiation but 5)

the third option is using HTML5 canvas, I tried using this but I prefer SVG, and you can embed SVG into an HTML5 document any way (now you can have SVG in mime type text/html rather than application/xhtml+xml)
basically instead of having each shape as an element it is just blitted to the canvas and thus it becomes tricky to keep attributes of a certain shape, for example it's x/y coordinates, of course it is possible but I don't like this.
as I mentioned blitting the canvas at a given time is just an image, thus you can save the image. with SVG the text is text, not text embedded in an image (note difference between image and graphic), this is very useful as you can create beautiful headers etc and still have the text highlightable, giving a boost in accessibility.

if you need any more help or have questions feel free to just give me a pm or chat on SRLs irc channel, irc.rizon.net #SRL

cheerio, craiggles.

Billybob 001
06-18-2010, 01:34 PM
well, there's 3 options, but I'd strongly advise not using one of them.

first of all you could use flash, and this is the option I'd advise not using, you want reasons why not? google for reasons there's no point me repeating what's already been said.

the second option is using Scalable Vector Graphics (http://www.w3.org/TR/SVG/).
I really like SVG because each shape is an element, and thus you can directly manipulate it using javascript, I did have some examples of what I've achieved with SVG but I don't at this moment in time, however I am working on some.

note: svg does not natively work with internet explorer (any version, though in version 9 it will be supported), to get it to the user has to have the adobe svg plugin installed, and instead of just having a svg document you have to embed it into an HTML document using the object/embed element (note embed is not defined in any HTML speficiation but 5)

the third option is using HTML5 canvas, I tried using this but I prefer SVG, and you can embed SVG into an HTML5 document any way (now you can have SVG in mime type text/html rather than application/xhtml+xml)
basically instead of having each shape as an element it is just blitted to the canvas and thus it becomes tricky to keep attributes of a certain shape, for example it's x/y coordinates, of course it is possible but I don't like this.
as I mentioned blitting the canvas at a given time is just an image, thus you can save the image. with SVG the text is text, not text embedded in an image (note difference between image and graphic), this is very useful as you can create beautiful headers etc and still have the text highlightable, giving a boost in accessibility.

if you need any more help or have questions feel free to just give me a pm or chat on SRLs irc channel, irc.rizon.net #SRL

cheerio, craiggles.

the third option is HTML5 canvas

Since I want this project to be playable on all mobile phones, the option to play it on the computer will just be easy to add is all, I don't want the specific need for any extensions/programs/plug-ins such as "adobe svg plugin". The main browser language is going to be WML for the mobile phones.

Craig`
06-18-2010, 07:45 PM
sorry, but you have not read carefully what I said.
I said that Internet Explorer does not natively support SVG, thus it requires the adobe svg plugin for svg support.

to my knowlege, most moblies ship a browser that is NOT internet explorer, thus you do not need what you call "extensions/programs/plugins"

I actually said that you could look into tiny svg, which browsers are supporting; carefully read what I say next time: thanks.
craiggles.

EvilChicken!
06-18-2010, 08:59 PM
.. Java?

If browser only, then JavaScript for a fun challenge.
Or, Flash, but I suspect that's too obvious of a thing to point out and that you're not going for such answers.

Craig`
06-18-2010, 09:37 PM
java applets are pretty dead, and runescape is probably the most popular one.
my advice is to stay away from java, crockford explains why in some of his lectures.

again with flash, i'd advise to stick away with that for reasons I've already established.

'javascript for a fun challenge', well yes if you don't know much javascript I guess it's a challenge but don't underestimate the power of the language :)

I'd advise learning javascript though; no knowing how to add onclick attributes is not you showing knowledge of javascript. Know variable scope (it's different in javascript) and thus why anonymous functions can prove useful, learn how to add event handlers (no, again not <blah>.onclick = function() { })

good luck; craiggles.

Frement
06-18-2010, 09:39 PM
@Craig: "SVG-oids was written by IE’s own Andy Zeigler over a weekend shortly after we got SVG working in the IE9 Web platform." :)

Craig`
06-18-2010, 09:43 PM
note: svg does not natively work with internet explorer (any version, though in version 9 it will be supported)

@Frement:
yeah I'm really excited for when IE9 is officially released and thus svg can be seen by a wider range of users. with HTML5 you'd be able to directly embed svg and then use HTML5 elements such as audio, thus being able to have all the features required for a full fledged 2D game :D

I'm guessing that they'll also support WebGL so that could encourage more browser 3d games to be made. fun fun fun.

Billybob 001
06-19-2010, 03:18 PM
sorry, but you have not read carefully what I said.
I said that Internet Explorer does not natively support SVG, thus it requires the adobe svg plugin for svg support.

to my knowlege, most moblies ship a browser that is NOT internet explorer, thus you do not need what you call "extensions/programs/plugins"

I actually said that you could look into tiny svg, which browsers are supporting; carefully read what I say next time: thanks.
craiggles.

I am sorry for the misunderstanding, I was just under the impression that SVG required a plugin to be able to use, somewhat like how java is with its plugins. When I say I don't want programming languages that require some kind of program/extension/plugin to use, I just say that so future posters can see that I want this game to be compatible for mobile phones mainly, you just will be able to play the game on the computer if you wanted.

To the poster above me, Javascript is not supported on a lot of mobile phones. Also Javascript is client side. I want the game to be multiplayer (unless javascript does this???). I know some javascript, but the only javascript I know can only be useful for client side scripting and it wouldnt be of any use for this type of game because a lot of phones do not support javascript.

Craig I gave you +rep for the information you posted yesterday. It was very useful to me and I have taken some things into consideration. I just want to see if there is a wider variety.

Craig`
06-19-2010, 10:01 PM
Thanks for the rep!

Well again you have a little misunderstanding with technologies; you are correct that javascript is client side but as is java or flash when used as applets/objects.

what you can do is keep track of the stats etc using javascript and then send them to the server using your server side language of choice.
some may say that using javascript is a bad idea for this as it is pretty easy to manipulate javascript with firefox plugins such as firebug, however there are ways around this, and the same problems arise for flash for example flash cheat engines, but don't worry you can make safe code :)

you say javascript is not supported on a lot of phones, but this really depends.
if you're making a browser game chances are that more recent phones will be used, and recent phones have surprisingly good javascript support.

I can remember watching a video about the N900 supporting WebGL, which is heavily javascript.

I personally think that the recent phones will support tiny svg and javascript and that less people with 'older' phones would probably not expect the game to work, i don't know.

just my thoughts,
craiggles.

Billybob 001
07-13-2010, 04:26 AM
I have updated my question on this thread. I went through it and realized it really wasn't well explained.