Archived

This topic is now archived and is closed to further replies.

kam

Iso view on a browser - is it possible?

Recommended Posts

I''m in the middle of developing a role playing game.. The game is fine, but I want to get some nice graphics in there based on an Isometric view. The only stipulation is that the game must run in a standard browser with no 3rd party extensions or plugins. Generating an isometric view in pure HTML would seem impossible, but I am confident that it is possible - OK the graphics wont be as good as a plugin version, but it will be executable on any browser. The main problems that I have are thus:- 1) How do I model an isometric view using tables as iso views are rotated through an angle along the Y axis. 2) Which tile shape would be best applied to this model? Square, Octagon or Hexagon? and how would these affect the difficulty of coding such a game model? 1) I have thought about just using a non rotated view and then applying a "Fog of war" effect to non viewable areas, this would give the illusion of a rotated effect, but then actually linking the sprites in the cells becomes a little tricky - This is due to the angle at which the sprites (e.g. walls) are drawn within the cells. 2) Using square tiles is really simple - as this is the natural shape of the cells in HTML, but octagonal/hexagonal tiles are more difficult (but provide a better gaming experience).. main problems with this is aligning cells (as they would surely need to be offset in order to compensate for the direction in movement of the character). The primary language this is being coded in is PHP, with an SQL database. I will try and get a static demo installed, as this is tricky to explain, but in the meantime - Has anyone else attempted this and what problems did they have / how did they overcome them. Any information would be useful. Thanks Kam

Share this post


Link to post
Share on other sites
What you do is not use tables, but use DHTML, or some other technique of positioning transparent-background GIFs or PNGs exactly where you want them, relative to some source. Say, a 600x400 pixel black background, and you position all in-game objects relative to that.

Wait... no third-party extensions or plugins... not everybody likes or supports DHTML...

You''re using PHP? Then you can control the usage of a certain 3rd-party (server-side) library. Link- or compile-in the GD library ( http://www.boutell.com/gd/ ), and go look at this tutorial on WebMonkey ( http://hotwired.lycos.com/webmonkey/01/21/index4a.html ), and then look at the GD documentation to go further.

Write a script that renders the view based on the variables passed-in to it, and there you be. Enjoy.

Share this post


Link to post
Share on other sites
The other alternative is to assemble the view server-side, and transmit it as a simple image. This would work well as a server-side image map for feedback.


How appropriate. You fight like a cow.

Share this post


Link to post
Share on other sites
Use a layer per tile/sprite. Everything support layers, and you can move them around and change their Z ordering. Since you can overlap layers, you can use GIFs or PNGs with transparency to tile your isometric map.

Share this post


Link to post
Share on other sites
I don''t want to discourage you, but rendering a map like that through HTML is slow and gives laggy display. I''ve seen it done through Flash and Java but I don''t think DHTML without plugins is going to be adequate.

Share this post


Link to post
Share on other sites
You might consider SVG or Flash. I looked into SVG and it has some neat zoom/scroll capabilities through the viewbox by using the mouse and keyboard. Adobe has a free plugin to render SVG.

Share this post


Link to post
Share on other sites