Stencyl 3.4.0 is now out. Get it now!

Merrak's Isometric Adventures -- UI Toolset

NickamonPoppytail

  • *
  • Posts: 491
Because of the tight deadline, Nanowrimo has taken over the top priority slot. But I've also just crossed 32,768 words (out of 50,000).

Nice job! Good to see you're making progress (both the Vallas Engine and Nanowrimo)!

merrak

  • *
  • Posts: 1641
Editor Adventure. Lately I've been working on my new level editor. I've had quite a bit more time since Nanowrimo ended (I did break 50k words on my flight back from Houston... so yay!)

Until recently I haven't had much to show for it... mostly working on back-end code. Now I finally got something that resembles an editor.


Although the screenshot looks similar to other recent images, the routine that draws the room is significantly different than the in-game renderer. The editor doesn't perform any optimizations and renders every tile, whether it is blocked from view or not. This is close to the behavior of the original renderer design, but the editor uses bitmaps, not actors, for the tiles.

One of the biggest advantages of the editor will be that I can finally visualize how rooms will look without messing around with layers in Tiled. This will make it a lot easier to create tall shafts. I also am not tied to the standard 48x32x4 map--a "standard" that was really just defined because it was tedious to create new templates.

Once I get sector definitions in place, it'll be easy to see what the player will see. Once I sat down to think of features, I realized just how much time a proper editor will save, so I think it will be a good investment of time.

mdotedot

  • *
  • Posts: 1282
Wow a big update!
That is looking awesome.

Once I sat down to think of features, I realized just how much time a proper editor will save, so I think it will be a good investment of time.

Yeah, I totally agree. The time spend will be worth the while. And to be honest creating an editor you use the same stuff and you get an idea of how good or bad it is implemented.

Hanging out in the Chat:  http://www.stencyl.com/chat/

Proud member of the League of Idiotic Stencylers! Doing things in Stencyl that probably shouldn't be done.

merrak

  • *
  • Posts: 1641
Yeah, I totally agree. The time spend will be worth the while. And to be honest creating an editor you use the same stuff and you get an idea of how good or bad it is implemented.

One of the little side benefits is that I finally have a need to put together a basic GUI system. I can spend a little extra time and put together something that would be really useful for a lot of applications.

Here's what I have so far, using blocks to set up a dialog box and buttons:


and the result


There's still some work to be done, of course. So far all I have is the render--no interaction. I also need input boxes, radio buttons, and scroll bars.



Majora64

  • *
  • Posts: 498
Ok this is cool. That editor looks like itll help streamline the process. I havent gone through every page of this journal but are your levels hand made or do you generate them with tile api or proc gen?

merrak

  • *
  • Posts: 1641
All of the levels are hand-drawn, currently using Tiled. In fact, I'm pretty much still using the same system I hastily developed for the original Temple of Idosra. If anyone's really curious what I'm trying to get away from, this is the xml file that generates the levels in the screenshots. Or, rather, that's part of it. The xml file was constructed by hand. The files referenced called "floorplan" are .csv exports from Tiled. (This isn't the definition file for the original game, although the header still says October 2016).

It's really a terrible system for a large game world. Using Tiled, I have no ability to set object properties (example: the contents of a chest). So once all the walls and items are loaded, I have these things called "flags" that tell the game how to configure certain properties.

The worst part from the original game was setting the exit data (by hand):

Code: [Select]
4,17,1,Idosra2-entry,0,0|4,18,1,Idosra2-entry,0,0|2,16,1,Idosra2-gardens,0,0|2,17,1,Idosra2-gardens,0,0|2,18,1,Idosra2-gardens,0,0|2,19,1,Idosra2-gardens,0,0
This tells the game where to put the player when they walk out of one map and into the next one. Keep in mind that in the original game, each of the 113 rooms was its own map  :'( When the power went out I sat down with a stack of graph paper and worked out these coordinate codes for each of the ~300 exits. This is why there isn't much variation in the location and size of exits between rooms.

The problem with poorly designed code is that it has to get bad enough to a point before it can be justified taking the time to replace it. Tiled itself is limited. It's too cumbersome to create maps that are more than ~4 floors tall. I originally switched from the Stencyl scene editor to Tiled because Tiled has an isometric mode--but it wasn't designed for multiple level map designs.

So a new editor is where I am now :) In the future I do want to explore procedural generation, but what I'd probably do is create a bunch of "template rooms" and then glue them together in random ways.

NickamonPoppytail

  • *
  • Posts: 491
Using Tiled, I have no ability to set object properties (example: the contents of a chest).

Couldn’t you create list attributes for these sorts of things?

merrak

  • *
  • Posts: 1641
Couldn’t you create list attributes for these sorts of things?

Eh, kind of. In a way, I'm already using attributes. Actors serve the role of templates and I'm using xml files to serve the role that the inspector serves in the scene editor.

But here's the problem. Let's say I want to make a dozen chests with different things in them. One option would be to use the scene editor, then I could use the inspector to configure the chests to have unique contents. But the scene editor is designed for 2D scenes. I have a 3D world. I could use the scene editor if I had 2D maps (like, say, in Doom). Here's an example of part of a map I designed.


There are corridors weaving underneath the floor. There's actually a ventilation system you can sneak through. There are arches and bridges to go under and above.

I suppose one thing I could do would be to not use templates--just have one actor for each unique item. That's not really optimal either, though. In my chests example, I'd have to make a unique actor for each chest. Note that creating actors isn't as simple as going into Stencyl and copy + pasting them. I also have to set up the 3D configurations. This includes calculating the coordinates of each planar surface that makes up the structure, the normal vectors for each surface, etc. It's very tedious. In fact, I'm also considering creating another tool--a structure editor.

As much as a lot of people seem to love the idea of a "Stencyl 3D", I'm not sure how many of them realize just how much of Stencyl would have to be redone beyond updating the Stencyl engine itself. mdotedot may have some additional comments on this point. Take a look at what he's working on if you haven't yet.

Stencyl provides a great platform to build on top of, even for 3D--but if you're going to do a lot of 3D work then you'll need to either make your own 3D tools to build with, or integrate existing tools with Stencyl yourself.

NickamonPoppytail

  • *
  • Posts: 491
Actors serve the role of templates and I'm using xml files to serve the role that the inspector serves in the scene editor.

But here's the problem. Let's say I want to make a dozen chests with different things in them. One option would be to use the scene editor, then I could use the inspector to configure the chests to have unique contents. But the scene editor is designed for 2D scenes. I have a 3D world. I could use the scene editor if I had 2D maps (like, say, in Doom). Here's an example of part of a map I designed.



I don’t know anything about .xml files,, but since the scene editor’s inspector is not suitable, could the .xml files do anything similar to actor customisation?

There are corridors weaving underneath the floor. There's actually a ventilation system you can sneak through. There are arches and bridges to go under and above.

I suppose one thing I could do would be to not use templates--just have one actor for each unique item. That's not really optimal either, though. In my chests example, I'd have to make a unique actor for each chest. Note that creating actors isn't as simple as going into Stencyl and copy + pasting them. I also have to set up the 3D configurations. This includes calculating the coordinates of each planar surface that makes up the structure, the normal vectors for each surface, etc. It's very tedious. In fact, I'm also considering creating another tool--a structure editor.

How many editors have you created for this project?

merrak

  • *
  • Posts: 1641
What I'm currently working on is the only real editor. When I was working on the renderer I wrote a lot of demos so that I could verify certain key calculations were being done correctly. There's also the map viewer and sector viewer which is where I got a lot of the screenshots from the summer posts.


The sector viewer's original role was to help me debug the shadow code. It may find a new life as part of the structure editor if I do create one.

merrak

  • *
  • Posts: 1641
Making some nice progress on the UI toolset. I've moved the project over to an extension so that it is easier to write something that can be integrated into multiple projects. This is the current set of blocks.


The basic idea is that you use the blocks to configure the UI, which the render block will then use to create a bitmap. One of the nice features is that I will be able to add options to use decorative borders, background images, or even actors in the interface.

The usual way I create interfaces is to use a bunch of booleans to manage what is drawn in a 'drawing event'. The interface extension eliminates that need. Since it creates bitmaps, it should be possible to apply tweens or any other effect that can be applied to an image. UIs created can also interact with the image API.

SadiQ

  • Posts: 1750
Cool UI stuff there. How do you actually draw the text on the bitmap? I used a shape and a textfield, drew them on a bitmapdata, and created the Bitmap from that, but I have no idea if there's a better way. And I believe my buttons looked different in flash/windows compared to html5 :(
Proud member of the League of Idiotic Stencylers! Doing things in Stencyl that probably shouldn't be done.

merrak

  • *
  • Posts: 1641
I just use the Image API function

Code: [Select]
drawTextOnImage( image, title, tx, ty, title_font );
I haven't noticed anything odd, but I've only tested on desktop builds.