browser based game in ruby

You're trying to run sdl in a browser?

I would like to. I was wondering if it is possible? And if not what should I use? I am very new to browser-based games. But I would rather have the game run in a browser than make something run server side and also put out a client module.

It's not really possible. The two most popular options out there for browser-based games is Flash and Java.

The most basic approach to making browser based games is just to have your server-side Ruby script output HTML (and &#106avascript/JScript/ECMAScript</a> code) to the browser. The &#106avascript can then draw things by inserting image tags etc into the HTML page, and it can communicate with the server by using <a href="http://en.wikipedia.org/wiki/AJAX">AJAX</a> techniques.</a>

Much to my surprise, it appears that Silverlight, Microsofts concurrent of Flash, supports Ruby, among other languages.

If you want to use ruby to make a web based game may I suggest ruby on rails. You can go with silverlight but anyone who wants to play your game will have to download and install a run time. This would be unnecessary with rails.

I would like to set it up so users do not have do download anything. It seems like using Ruby for database connectivity and using AJAX for the graphical interface. I have never used &#106avascript for any sort of drawing. My primary concern is that I want to have a fairly large map divided into a grid say for example 100 * 100 squares and display to the user 10 * 10 squares at a time is it possible to load the entire image at once and have only a portion displayed? Also I want to be able to click and interact with the squares is this possible with &#106avascript? Last thing is I would like if possible to have a minimap. I am wondering is this a lot for &#106avascript to handle? The graphics dont have to be anything special it is more the interactability I am looking for. If these techniques are possible with &#106avascript then I am wondering if anyone knows of any good resources for doing these sort of map techniques.<br><br>Thanks

Quote:

Original post by stonemetal If you want to use ruby to make a web based game may I suggest ruby on rails. You can go with silverlight but anyone who wants to play your game will have to download and install a run time. This would be unnecessary with rails.

Flash requires a runtime and flash game developers aren't suffering from lack of players.

Quote:

Original post by dark_helmut My primary concern is that I want to have a fairly large map divided into a grid say for example 100 * 100 squares and display to the user 10 * 10 squares at a time is it possible to load the entire image at once and have only a portion displayed?

To do graphics like this, you will have to learn a bit about making web-pages in general. w3schools is ok for brushing up on HTML and CSS.
Image tags can stretch/squash the images that they display, and a div tag can be used as a border. If you set the div's overflow property to 'hidden', then any parts of the image that go outside of the div-rectange will be invisible.

Here's an example of some HTML/CSS that displays a 150x150 px image inside a 50x50px frame.The div is a 50x50 px frame for the image. The image is stretched to 150x150 px, but it is offset by -50px left and up, meaning the center 50x50 pixels are shown.

You can hard-code in these values using CSS like I've shown here, but you can also use &#106avascript to change positioning of elements with code.

Quote:

Also I want to be able to click and interact with the squares is this possible with &#106avascript?<!--QUOTE--></td></tr></table></BLOCKQUOTE><!--/QUOTE--><!--ENDQUOTE-->Pretty much every HTML tag can be given an &#111;nclick/onmousedown/onmouseup event handlers, so you can quite easily make some JS code run in response to user inputs.<br><br></td></tr></table></blockquote>

Quote:

Original post by smitty1276 Flash requires a runtime and flash game developers aren't suffering from lack of players.

Flash enjoys a large install base. silverlight doesn't. But you are correct it doesn't seem to hurt them much.

Quote:

Original post by dark_helmut I would like to set it up so users do not have do download anything. It seems like using Ruby for database connectivity and using AJAX for the graphical interface. I have never used &#106avascript for any sort of drawing.

AJAX isn't a language, it's a &#106avascript technique used to send/receive data to/from a server behind the scenes (without loading the page). It has nothing to do with graphics. &#106avascript doesn't really have any (good) graphics support. While there are libraries which will allow you to draw pixel by pixel with &#106avascript, "drawing" with &#106avascript is usually just simply displaying images.<br><br><!--QUOTE--><BLOCKQUOTE><span class="smallfont">Quote:</span><table border=0 cellpadding=4 cellspacing=0 width="95%"><tr><td class=quote><!--/QUOTE--><!--STARTQUOTE--><i>Original post by dark_helmut</i><br>My primary concern is that I want to have a fairly large map divided into a grid say for example 100 * 100 squares and display to the user 10 * 10 squares at a time is it possible to load the entire image at &#111;nce and have &#111;nly a portion displayed?<br><!--QUOTE--></td></tr></table></BLOCKQUOTE><!--/QUOTE--><!--ENDQUOTE--><br>You would probably want to have a main "map" div, which contains a grid of images which change/move when the player moves &#111;n the map.<br><br><!--QUOTE--><BLOCKQUOTE><span class="smallfont">Quote:</span><table border=0 cellpadding=4 cellspacing=0 width="95%"><tr><td class=quote><!--/QUOTE--><!--STARTQUOTE--><i>Original post by dark_helmut</i><br>Also I want to be able to click and interact with the squares is this possible with &#106avascript?<!--QUOTE--></td></tr></table></BLOCKQUOTE><!--/QUOTE--><!--ENDQUOTE--><br><br>Yup, any HTML element can have events, which includes an "onclick" event.<br><br><!--QUOTE--><BLOCKQUOTE><span class="smallfont">Quote:</span><table border=0 cellpadding=4 cellspacing=0 width="95%"><tr><td class=quote><!--/QUOTE--><!--STARTQUOTE--><i>Original post by dark_helmut</i><br>Last thing is I would like if possible to have a minimap. I am wondering is this a lot for &#106avascript to handle? The graphics dont have to be anything special it is more the interactability I am looking for.<!--QUOTE--></td></tr></table></BLOCKQUOTE><!--/QUOTE--><!--ENDQUOTE--><br><br>Like I said above, graphics with &#106avascript is just displaying a bunch of pre-made images.<br><br>I would suggest you yake a look at <a href="http://www.fallensword.com">Fallen Sword</a>, which does something similar to what it sounds like you have in mind. You can also check out <a href="http://stelimar.freehostia.com">one of my former projects</a> (dead now) for an example of using AJAX with a map system like the &#111;ne you described, so that the page doesn't have to be refreshed every time the player moves.<br><br>Hope this helped,<br>-Stelimar

I recommend using DHTML for doing graphics in &#106avascript. Admittedly I don't know a whole lot about the other options presented here, but I found it very easy to work with the div's.<br/><br/>You can set borders for them, background images, z values (so they can overlap each other, and you control which one goes on top) and all sorts of fun stuff.

Thanks for the posts Stelimar and Hodgman very helpful information. As far as my comment about AJAX I am aware that it is not a language in itself but uses Asynchronous &#106avascript to keep an open communication between the server and client, I just worded my comment stupidly. I used AJAX once for work on a chatroom, had a few problems during development (was my first and only real run-in with AJAX) and it was kinda slow but for the most part did the job quite well. One more question when using an onclick event on an image is there anyway I can get the x,y coordinates of the image where the user clicked? It seems as though you can do it if you put the map in a form and use the click as a submit but this doesnt seem to be the best way to do this. I want to be able to determine what square on the grid the user clicks in.<br/><br/>Thanks for the help<br/><br/>

I can't remember if you can get the click-location relative to the clicked-on-object.

I know you can get the mouse position though, and if you also know the absolute position/size of the image you could calculate the click-location yourself.

Alternatively, you could draw each grid-square as a separate image.

e.g.

<img src=... onclick="GridSelect(0,0);" /><img src=... onclick="GridSelect(0,1);" />
<img src=... onclick="GridSelect(1,0);" /><img src=... onclick="GridSelect(1,1);" />

I can't remember if you can get the click-location relative to the clicked-on-object.

I know you can get the mouse position though, and if you also know the absolute position/size of the image you could calculate the click-location yourself.

Alternatively, you could draw each grid-square as a separate image.

e.g.

<img src=... onclick="GridSelect(0,0);" /><img src=... onclick="GridSelect(0,1);" />
<img src=... onclick="GridSelect(1,0);" /><img src=... onclick="GridSelect(1,1);" />

Quote:

Original post by Hodgman Alternatively, you could draw each grid-square as a separate image.

Would this be more strain on the server than loading one large image?

With one large image I could just load it once and then scroll across it but multiple images would require many loads and individual loads everytime i scrolled, at least it would seem to me.

Quote:

Original post by MortusMaximus I recommend using DHTML for doing graphics in &#106avascript. Admittedly I don't know a whole lot about the other options presented here, but I found it very easy to work with the div's. You can set borders for them, background images, z values (so they can overlap each other, and you control which one goes on top) and all sorts of fun stuff.

DHTML just refers to the use of &#106avascript (or another scripting language) to change an HTML page, which is what has already been talked about...<br><br><!--QUOTE--><BLOCKQUOTE><span class="smallfont">Quote:</span><table border=0 cellpadding=4 cellspacing=0 width="95%"><tr><td class=quote><!--/QUOTE--><!--STARTQUOTE--><i>Original post by dark_helmut</i><br>One more question when using an &#111;nclick event &#111;n an image is there anyway I can get the x,y coordinates of the image where the user clicked? It seems as though you can do it if you put the map in a form and use the click as a submit but this doesnt seem to be the best way to do this. I want to be able to determine what square &#111;n the grid the user clicks in.<br><br>Thanks for the help<!--QUOTE--></td></tr></table></BLOCKQUOTE><!--/QUOTE--><!--ENDQUOTE--><br><br>You could do this a few ways:<br><br>1. You could base it &#111;n the coordinates of the image, as was already suggested.<br>2. You could store the coordinates in the ID of each image, and use &#106avascript to retrieve them (for example: id="12,5").<br>3. You could use your own HTML attributes (for example: xCoord="12" yCoord="5") &#111;n each image tag to store the coordinates.<br>4. You could use attributes &#111;n the DOM object of each image to store the coordinates.

Quote:

Original post by dark_helmut Quote: Original post by Hodgman Alternatively, you could draw each grid-square as a separate image. Would this be more strain on the server than loading one large image? With one large image I could just load it once and then scroll across it but multiple images would require many loads and individual loads everytime i scrolled, at least it would seem to me.

It could actually put less load on the server, because you could reuse tiles. In addition, it would be much easier to get the coordinates of the square clicked if there were separate images, and you wouldn't have to load as many images when the page is first loaded, making quicker loading times for the user.

I have decided to use individual images for each grid and all is working well. Thank you all for your help. Does anyone have any ideas on implementing a minimap?

Thanks