Creating new adventure/game/etc in html engine I'm building

Ideation
1

This is related to the html game engine I am working on.

(To see a very simple WIP, go here. You can only generate maps and pan around, but it works on mobile via touch and mouse well, which is a huuuge win for me!)

Anyway, I am thinking, design-wise… you’d configure your entire game via css.

For example:

/* Backgrounds */

.b-grass-1 { background-image: url("img/oryx/td_world_floor_grass_a.png"); }
.b-grass-2 { background-image: url("img/oryx/td_world_floor_grass_b.png"); }
.b-grass-3 { background-image: url("img/oryx/td_world_floor_grass_c.png"); }

/* Decorators */
.flower1 { background-image: url("img/oryx/td_world_flower_a.png"); }
.flower2 { background-image: url("img/oryx/td_world_flower_b.png"); }
.flower3 { background-image: url("img/oryx/td_world_flower_c.png"); }

.butterfly1 { background-image: url("img/oryx/td_world_butterfly_a.png"); }
.butterfly2 { background-image: url("img/oryx/td_world_butterfly_b.png"); }

.mountain1 { background-image: url("img/oryx/td_world_mountain_a.png"); }

I am using background-image in a horrible way in this example, I’d imagine sprite sheet would for sure be the way to go.

This is because all maps (world map, forest, village, inside of a house, etc) are based off json arrays:

[
    [{
        "b": "b-grass1",
        "d": ["flower1", "butterfly2"],
        "p": 0
    }, {
        "b": "b-grass1",
        "d": ["flower1"],
        "p": 0
    }, {
        "b": "b-grass3",
        "p": 0
    }, {
        "b": "b-grass1",
        "d": ["flower2"],
        "p": 0
    }],
    [{
        "b": "b-grass1",
        "p": 0
    }, {
        "b": "b-grass1",
        "d": ["mountain1"],
        "p": 1
    }, {
        "b": "b-grass2",
        "d": ["flower1", "butterfly1"],
        "p": 0
    }, {
        "b": "b-grass1",
        "d": ["flower3"],
        "p": 0
    }],
.... etc

In this example, this map is 4 tiles wide, and we’re seeing the first 2 rows of the map.

  • b stands for the background used, there’d only ever be one.
  • d is decorator(s). This is laid on top of the background of that tile. There can be multiple.
  • p indicates if the tile is passable.

So in the above map, there’s mostly grass with some butterflies and flowers, and on (1,2) there is a mountain, and game pieces (what the player and AI move) cannot move on that.

I am not expecting game creators to write json by hand. My goal is the creators drop in a config file, broken into various sections. Like:

map1:b: [b-grass1:85%, b-grass2:10%, b-grass3:5%], d:[flower1:10%, flower2:10%, flower3:10%, butterfly1:5%, butterfly2:5%, mountain1:5%:1];
map2: ...etc
...
map15: wizards-grotto.json

So the creator is more taking their palette and letting the system autogenerate some stuff. But, like map15, you do have the ability to hand-craft an area if you want. I am also thinking in the config file you’d also have markers for like:

story:gimlis-lost-axe,piece:Gimli,part:1,on:b-grass-3

in one of those map lines, and the system, when generating that map, would place the Gimli piece appropriately. Story things would be in their own file.

These are just my initial thoughts, but it feels promising.

My question then is, for a story teller, is making your own css for all your tiles/decorators/piece types feel too cumbersome, or does it seem ok?

This could also be automated with something sitting on top, generating these files as output.

Also, I need name ideas for this CSS Grid / JS game engine. :grin:

1 Like