How to compose rooms? - Githubissues

benjamin-heasly commented 6 years ago

I set up some code to read a room specification from a JSON file, and display it. So we could start authoring multiple room files.

But it seems like the current JSON format will become tedious for all but the simplest rooms. Can we figure out a better way to compose rooms and save them as data files for the game to load?

I had one idea that we could use a spreadsheet editor, and save the results as csv files. This seemed promising because spreadsheets have a 2D structure just like rooms. So you'd see the room (roughly) right in the editor. But it also felt clumsy. For example, in a spreadsheet, where would we save the name(s) of tileset images? This made it seem like less of a good fit. Though maybe it's still worth a try?

Another idea, maybe we could use ASCII art?

--------2---
---2--------
---111------
---11111-1-1
------------

There's something nice and low-tech about that. We could even embed the ASCII art in the JSON, and then let the numbers refer to other parts of JSON where details are stored, for example:

{label: 1, art:"metal-tiles.png", style:"beveled"},
{label: 2, art:"wood-tiles.png", style:"rectangle"}

One problem is that this would only look right when viewed in a fixed-width editor. So it might not prove useful for design.

With either of these ideas, we'd need to code up a new way to figure out which tile is an edge, corner, interior, etc. One advantage of the current JSON format is that everything is a rectangle, so it's easy to figure this out.

What do you think? Other tools or file formats for "2D modeling"?

RobotPrototype commented 6 years ago

I like the ascii too! It feels like something we'd get used to looking at and understanding. I could see formatting a text editor to have a very visual way to format a block of ascii like that.

I'm not sure if this is helpful, but I had a thought about spritesheets. There is really only one kind of surface tile. Ditto for corner tyles. It is the same drawing rotated by 90 degrees a few times over. Would it be preferable in any way to account for the rotation of each tile in order to determine its facing?

You had mentioned using a lot of if/thens to get a version of this working... how cumbersome would that be to set up? It might be a good way to get stuff going. If it's a repetitive/boring coding/goodpracticeforjesse type of thing I'd be happy to try and implement something.

I was getting excited thinking about designing generic rooms. Intermediate tunnels/4way intersections type of things. I think having a feeling for what a room might actually look like could be a good carrot.

benjamin-heasly commented 6 years ago

I'm gonna try to set up something to use ASCII art embedded in JSON. I'm hoping Atom Beautify will be our friend.

I'll take a stab at the logic and see how far I get. Maybe we can collab it...

I was thinking about using rotated tiles, too. I think we can definitely do it. Or, would it be cool visually to support tile sets that are asymmetric? Like a hover platform that's grippy on top, shiny on the sides, and lasery on the bottom?

benjamin-heasly commented 6 years ago

I tried a thing with JSON arrays. I think this looks sensible with Atom Beautify. You can roughly see the platforms in a room, and the overall room size. It's pretty easy to edit.

I was thinking about generic rooms. We probably want to be able to keep the geometry the same but style them differently depending on the region, etc. So I separated the tile layout from the style definitions. If you change the styleFile in main.js, you can see the same room with different tile art!

What do you think?

benjamin-heasly commented 6 years ago

Oh, I should have mentioned too:

I changed the camera coordinate system in context.js, so that the origin is in the top left. This way, the tiles in the JSON file have the same layout and orientation as in they do in the canvas.
I added some keyboard event handlers so that we can pan around the room (the room can be bigger than the canvas!)

RobotPrototype commented 6 years ago

i'll try and design new tile stuff... i'll think ahead to potential needs and maybe get inspired about the games over-all design! I'm going to add creating a tilesheet formatted for rotating the tiles to my to-do list.

I'm going on tour for about two weeks, so i won't be able to devote long chunks of time to problem solving, but I will try to keep working on design elements and will stay in contact on GitHub as much as possible. Probably nightly/morningly.

100% agree with your choice about generic rooms, and I like the styleFile idea a lot. I thinking that labelling and organizing assets by region will be a useful method. Currently working on a Light Surface Cave background sketch.

Hooray for those event handlers. It is satisfying to tool around the room like that! But it made me think of a small edit. On my computer, the web-page has it's own scroller outside of our canvas. I would guess there is a simple way to get rid of that minor nuisance. Probably something in the html part of our code.

I think that each region will have a few different background possibilities, as well. Where should we tell the game which background to draw? I could see it being related/near to where we call for the styleFile.

I am looking at the HowDoesItCount style, and it I think it can answer our questions! Two things came to mind: first, the white lines I drew were rough and bogus, so I'm not surprised that they look rough. Second, we're still getting the blur effect. In gimp the file is 96x96, so I thought it would cut cleanly. Going to look into whats happening between exporting the asset and it getting imported into RedBit.

hope this message is clear, rehearsed all day today! feeling a little loopy. not to mention our sweet drummer brought scotch!

benjamin-heasly commented 6 years ago

Created https://github.com/RobotPrototype/RedBit/issues/5 as its own issue.

benjamin-heasly commented 6 years ago

I think the background could become part of the style file. Maybe eventually it contains config for all four view layers?

To add just the background for now, maybe we enhance the style file to be like this?

{
  backgroundArt: "Assets/Backgrounds/foo.png",
  tiles: [
    {
      "shape": "rectangle",
      "tileArt": "Assets/Sprites/HDIC2.png",
      "tileSize": 32
    },
    {
      "shape": "beveled",
      "tileArt": "Assets/Sprites/HDIC2.png",
      "tileSize": 32
    },
    ...
  ]
}

benjamin-heasly commented 6 years ago

Created https://github.com/RobotPrototype/RedBit/issues/6 as its own issue.

RobotPrototype / RedBit

How to compose rooms? #2