Changed the server to my own instead of Google's App Engine.   http://gammagec.dlinkddns.com/Daimetric_war/

Added floor tiles, Selection Mode and a few other modes that don't work yet.

Implemented some Polygon Boolean functions so that I can do some smart clipping. For example if i want to modify just one tile, I can find out which tiles are behind it.. redraw them with clipping to exclude other tiles, then draw my new tile and then redraw only the tiles in front of it. This should allow fast enough single tile rendering for animations on the map.

Also the selection box won't be shown in front of tiles that it is really behind.. that annoys me. (right now the selection box and preview draw tile are being rendered onto a separate canvas)

Updated demo.

Implemented Flat Shading Model, so that you can see edges.

You can click to add tiles.  If you hold shift, it will stack the new tile on top.

Re-implemented walls & corners from original Engine.

Finally have a Demo of the new re-factored version.  Updated the main post.

http://daimetric.appspot.com/

Just a quick update.  I'm still working on this nightly.  I wrote a GWT Canvas 3d perspective version but the performance was bad.  Then I wrote a WebGL version, but idk, it wasn't a whole lot faster and I figured I can get similar performance with the regular Canvas version so there is no point dropping IE support just for that. Not to mention WebGL supposedly has security issues and won't become a real standard until that is fixed. 

So recently I rewrote the rendering engine to use a Scene Graph and compile node branches and I got some pretty good performance increase.  I was even able to allow complete rotation of the map.  The problem is I was trying to write it too generic and not specifically for a "Tile-based game".  So now i'm rewriting the Scene Graph stuff to be specifically for a Tile-Based Game. 

As far as the rotation goes, I'm going to allow the map designer to specify the camera angle for any tile, then when the player walks into that tile the map automatically rotates.  That way if there is a door behind a building, the map designer will be able to allow the player to see that door when he walks behind the building.

So, In an attempt to explore different possiblities, I wrote an entire OpenGL-like GWT library for Canvas.

Here is the outcome


The problem here is, in my Dimetric rendering, I manipulate the 2D matrix transformations given by Canvas object to do most of the math. 

In the GwtCanvas3d project I made, I do all of the math using 3D matrix's and the work gets done in Javascript code.

From what I can tell, it's at least an order of magnitude slower. Not to mention texture mapping would be out of the question.

The demo I made was getting between 0.5 and 1 frame per second to render 16x16 grid of size 32 cubes into a Perspective view.

Now I believe that I will explore the possibility of WebGL.  I'm a little mad, because I just recently got the IE9 implementation to work.  Oh well.. screw B.G.  WebGL looks great and the GWT bindings are already available.

Well, I don't want to get ahead of myself so for now I'm just keeping it to a Game Engine.  I hope to add some kind of scripting engine to it so that you can develop encounters.  It will have support for turn-based strategy combat.

My inspirations are Gold-box games like Champions of Krynn, and also games like Dwarf-Fortress / Minecraft

Thanks Windybeard. 

Just updated the demo with the multi-level map support.

TODO:
Non-plane-aligned texture mapping
Make a Player Tile
Add tile animation
Finish dynamic edges (don't show edges of walls connected to other walls)
Rotate map option
Hide/Show or make transparency for levels

Multi-Level maps is working.  Still working out some bugs it created before updating the demo. 

Catman, I don't think there are many limitations except that the browser must be HTML5. So far the framerate is pretty good.  HTML5 can handle sound, and even let you save client-side.  I hope to get IE9 support eventually...

As far as games go, I'd say it's best for any kind of turn-based strategy.  Games that inspire me are the old gold-box games like http://en.wikipedia.org/wiki/Champions_of_Krynn. 

It'd be neat to add a multi-player aspect since it's web-based, but I'm not sure.

Reduced number of Tile-picker buttons even further. Selecting a tile no longer places it.

Now a popup menu appears next to the selected tile with options to fill or delete.

Added new checkbox to flatten walls for better visiblity.

Fixed the edges (although on walls that aren't connected to anything, there will be no edges).  Plan to have a special option for that.

Fixed the bleed through under walls from floor tiles by adding a special FloorTile that has 4 configurable textures mapped to it.

Consolidated the tile picker buttons so that u modify the rotation and textures from the button itself.

Added Shift-Select so you can fill in large areas at once.

Added Import/Export of maps as strings.

TODO: Reduce the size of the exported map string by indexing the tiles.
      Add multiple z-levels
      Write texture mapper for non-plane-aligned textures
      Add a Character Texture
      Add support for animated texture

Managed to reduce the amount of 3d data by allowing the rotation of the 3d objects.  Of course, I can only map textures on X Y or Z plane, and they must be rectangular.

Added new floor texture (need to fix bleed through under walls)

Added T shaped wall

Need to find a way to dynamically draw edges, so they don't show where two walls connect

Added Demo from Google App Engine

[Map Editor]

Did a Major Refactoring.

Named the Project "Daimetric".  Here is a link to the new Re-factored version
http://gammagec.dlinkddns.com/Daimetric_war/

Here are the changes from the previous Engine:

1. Scene is completely Rotatable.
2. Able to stack Multiple Objects into one Tile.
3. Used scene-graph / pre-computing 2d points before render operations for performance
4. When you click on the map, it actually determines which polygon you hit and selects that tile.
5. Made overlay canvas for quick drawings (like the tile that follows the cursor) so that you don't have to re-render the main canvas.
6. Real Affine Texture Mapping, that doesn't depend on plane-aligned quads.  Now Triangles are used instead with actual texture-mapping coordinates.

=========== Old Post ===========================

Started work on a Isometric Dimetric Renderer for HTML5 using GWT.

Uploaded the Demo Map Editor to Google App Engine,
Try it out!
http://gwtgameengine.appspot.com/

Map Editor


This is the map editor for a Isometric Dimetric Game Engine written in Java using GWT and HTML5
Canvas operations.

Just to clarify, I changed the description of this game to Dimetric Game Engine for accuracty, see here http://en.wikipedia.org/wiki/File:Graphical_projection_comparison.png.  I figured it's best to do this before some know-it-all corrects me in the forum

The editor allows you to pan & zoom the map and select tiles to modify.  You then can select a tile from the bottom tile-picker and it will set that tile accordingly.

Multi-Tile selection is now available to fill large areas.  

You can export your map as text and then import.  I now hope to add the ability to save via HTML5 to the local browser data (not sure how it works yet).

Oh thank god! I love you Eclipse! I did "compare with local history" and sittin right there was Renderer.java and the option to restore from the grave!

Oh man, i really need to start using SVN up in here. In a fit of low FPS rage (and a few glasses of wine), I removed all of the JOGL / OpenGL code and had my mind set on Voxel rendering.... Now I need do that part over again. Oh well, always room for improvement right? I had some sweet recursive code for rendering Octets tho

OK, after playing Voxelstein a bit, I'm thinking Volumetric display isn't going to do exactly what I want for this game.  I'm going to try the JOGL code again but this time using Display Lists.

[UPDATE]

So I started working on the Octet map data structure.
I created a serializable Octet tree class. I wrote the client side code to display the FPS and the Updates per second (from server).  With one filled root octet the rendering was fine. I then wrote a PaintVoxel(double x, double y, double z) function for the octet that automatically subdivides the octet until it is a 1x1x1 voxel. This was fine also for just one voxel, however once I subdivided the Octet and made a 512x512 plane at the bottom, it killed the rendering.  Apparently rendering 262144 cubes on an OpenGL canvas isn't fast.  I guess I should've expected that. But fret not, I've been wanting to write my own Voxel-based renderer anyways.  I've looked at some of the recent Octet-Voxel based renderers that are out right now like Voxeltron and that Wolfenstein and they look good.

I will post some samples once I get further along.  I still need to do some experimentation with the Octet style rendering.  The idea is similar to minecraft style blocks, except the blocks can be bigger and smaller depending on how broken down the Octet is.  The goal is to have a fully destructable world. For example A forge building might just be a textured cube, but if it get's damaged somehow, it could be broken down into smaller cubes and some cubes could be taken out, right down to a pile of rubble. I still have a lot of experimentation to do.

Sandwich No.  Genius... probably not.  Hardworking? definitely not, but I've always felt that the best programmers are the lazy ones.