Autotiles in Canvas

Started by Heretic86, February 16, 2021, 05:36:06 am

Previous topic - Next topic

Heretic86

I came across this thread:
https://forum.chaos-project.com/index.php/topic,12618.msg172028.html#msg172028

Quote from: Blizzard on December 02, 2012, 11:15:38 amHere's our C++ code for that.

I have defined the ID arrays somewhere on top first.

static int _autotiles[6][8][4] = {
{{27, 28, 33, 34}, { 5, 28, 33, 34}, {27,  6, 33, 34}, { 5,  6, 33, 34},
{27, 28, 33, 12}, { 5, 28, 33, 12}, {27,  6, 33, 12}, { 5,  6, 33, 12}},
{{27, 28, 11, 34}, { 5, 28, 11, 34}, {27,  6, 11, 34}, { 5,  6, 11, 34},
{27, 28, 11, 12}, { 5, 28, 11, 12}, {27,  6, 11, 12}, { 5,  6, 11, 12}},
{{25, 26, 31, 32}, {25,  6, 31, 32}, {25, 26, 31, 12}, {25,  6, 31, 12},
{15, 16, 21, 22}, {15, 16, 21, 12}, {15, 16, 11, 22}, {15, 16, 11, 12}},
{{29, 30, 35, 36}, {29, 30, 11, 36}, { 5, 30, 35, 36}, { 5, 30, 11, 36},
{39, 40, 45, 46}, { 5, 40, 45, 46}, {39,  6, 45, 46}, { 5,  6, 45, 46}},
{{25, 30, 31, 36}, {15, 16, 45, 46}, {13, 14, 19, 20}, {13, 14, 19, 12},
{17, 18, 23, 24}, {17, 18, 11, 24}, {41, 42, 47, 48}, { 5, 42, 47, 48}},
{{37, 38, 43, 44}, {37,  6, 43, 44}, {13, 18, 19, 24}, {13, 14, 43, 44},
{37, 42, 43, 48}, {17, 18, 47, 48}, {13, 18, 43, 48}, { 1,  2,  7,  8}}
};

And this is how they are used:

// y, x and j are simply ints, iterated from 0 to 6, 8 and 4 respectively
int position = _autotiles[y][x][j] - 1;
int tx = x * 32 + j % 2 * 16;
int ty = y * 32 + j / 2 * 16;
int sx = position % 6 * 16;
int sy = position / 6 * 16;
generated->bltOver(tx, ty, autotile, sx, sy, 16, 16);
if (animated)
{
generated->bltOver(tx, ty + 192, autotile, sx + 96, sy, 16, 16);
generated->bltOver(tx, ty + 384, autotile, sx + 192, sy, 16, 16);
generated->bltOver(tx, ty + 576, autotile, sx + 288, sy, 16, 16);
}

Bitmap::bltOver simply overwrites the already existing pixels, nothing special. "autotile" is a the actual bitmap loaded from the file (the one that is 96x128 pixels) and "generated" is the bitmap that is put together for rendering. It looks the same like the generated bitmap that you can view in the RMXP editor when you open an autotile in a tileset setting.

So, I am not sure if this helps me at all.  What I am wondering is what the correlation between the surrounding 8 tiles, and how they are factored in for position determination?  Basically, is there a formulaic way to calculate which autotile should be selected from the generated tilemap?

https://www.webucate.me/canvas/editor.html

Click the "Toggle Tiles" button, then same as RMXP, if you Double Click on the Autotile Row, another window will open showing the generated map.  And yes my code looks absolutely awful right now.  Focused on functionality first...
Current Scripts:
Heretic's Moving Platforms

Current Demos:
Collection of Art and 100% Compatible Scripts

(Script Demos are all still available in the Collection link above.  I lost some individual demos due to a server crash.)

KK20


Other Projects
RPG Maker XP Ace  Upgrade RMXP to RMVXA performance!
XPA Tilemap  Tilemap rewrite with many features, including custom resolution!

Nintendo Switch Friend Code: 8310-1917-5318
Discord: KK20 Tyler#8901

Join the CP Discord Server!

Heretic86

I was able to download it and it was immensely helpful!  Thank you!  Seriously, I would not have been able to implement Autotiles without that Document!

The link I posted above is basically a PURE Javascript version of the RMXP Editor in a Webpage using Canvas, so there is nothing you have to download and install, click the link and edit away!  If you want to see if your documentation helped...  Its a Work In Progress, so lot of stuff is gonna change as this is a VERY early version of the Editor, so there is some garbage on there I will get rid of later that wont be in later versions.

If you do take the time to look for a minute or two (all its worth at this moment), what are your thoughts so far?
Current Scripts:
Heretic's Moving Platforms

Current Demos:
Collection of Art and 100% Compatible Scripts

(Script Demos are all still available in the Collection link above.  I lost some individual demos due to a server crash.)

KK20

Feels fine so far. Can't really comment on design choices since many things are still placeholders.

I do hope you allow the canvas to fill the browser window rather than implementing a hard limit. Speaking of, why 864x480?

What do you plan to use this for? MV/Z?

I would also suggest you try interpolating mouse movements when using the pencil tool on a zoomed out map. Currently, it draws a tile wherever the mouse is at when the update is called. If the movement is broad enough, you can cover many tiles within the frame update. Basically look into how the line tool is implemented in typical art programs.

Other Projects
RPG Maker XP Ace  Upgrade RMXP to RMVXA performance!
XPA Tilemap  Tilemap rewrite with many features, including custom resolution!

Nintendo Switch Friend Code: 8310-1917-5318
Discord: KK20 Tyler#8901

Join the CP Discord Server!

Heretic86

Okie dokie.  So far there is ZERO design choices.  Going for function first, then gonna make it look all purdy and what not.

I dont plan on sticking with 864 * 480 also very temporary, and yeah that needs to be changed.  It was very close to 864 * 486, which is (27 * 32) x (15 * 32)  but needed to get ability to scroll first, which I now have, so its on my "to do" list.  I dont plan on sticking with any particular resolution to make it compatible with many devices with various screen ratios too, so Im just gonna make it responsive.

Editor layout will be totally overhauled.  Not sure I really like the idea of separate windows for Tile Selection.  I have a feeling where I will end up focusing a lot of my efforts is on the Game input once I start working on that.  Im not very far into this, like maybe two weeks (with constant interruptions, power outages, etc), and not really sure what exactly I want to do with it yet.

Scrolling the canvas was a total pain in the ass.  I had to write some pure custom scrollbars.  So now the buffer canvases are also a lot smaller which has helped performance.  I also plan on performing even better since currently it draws every tile to the buffers every frame which is a huge cost on performance and waste.

That was probably causing a lot of lag and I would guess where the suggestion for Interpolation came from.  Still, I think Interpolation is an outstanding idea, and gonna add that to the TO DO list also!

I guess mostly I felt like doing this just to see IF it could be done, and I am very very curious now once I start saving data and running this all in a game engine (this is just the Editor), how well that game will perform!  Its a big giant test!  Also, it isnt necessarily limited to RPG Maker, so I guess it could also be tweaked to be a Platformer?  Or as a Plugin or something?

Im not 100% sure what I want to do with this yet, but it seems like it is kind of neat!  I mean how many Editors are there that are either total garbage, or way over commercialized that is over the head average person who just likes to fiddle around with stuff?

If I went the RPG route, of course it would either use fully legally authorized stuff licensed by owners, not just Enterbrain, but its not really that difficult to allow people to upload their own tilesets, assets, and audo, so what if it was RPG Maker XP but fully online where people didnt have to download and install even so much as the Resource Kit?  Maybe even allow for people to write their own scripts?  I know a lot of security stuff would have to be checked on that...

Kind of thinking out loud I guess...  Do you think that would hold peoples interest?  Send a link from a game they made in later versions of this to their friends?
Current Scripts:
Heretic's Moving Platforms

Current Demos:
Collection of Art and 100% Compatible Scripts

(Script Demos are all still available in the Collection link above.  I lost some individual demos due to a server crash.)