Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add Isometric level support #405

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

gugiserman
Copy link

@gugiserman gugiserman commented Nov 10, 2021

Hey guys,

I just recently found out about kaboom and I was totally in love with it, but I really wanted to be able to work with isometric tilemaps (mostly generated via Tiled). I was going to work on it as a plugin or maybe fork already existing plugins but I felt like this should be supported by Kaboom first and then integrated with external software as add-ons for extended support and more advanced use cases.

New logic added is mostly addIsometricLevel function in /src/kaboom.ts


image


Obs: I thought of maybe adding a isometric?: boolean to addLevel and make conditional rendering from there, but decided to go with separate method instead, so let me know what you think!

@gugiserman gugiserman force-pushed the feature/isometric-level branch 2 times, most recently from 5899339 to 27024e9 Compare November 11, 2021 00:07
@gugiserman gugiserman marked this pull request as ready for review November 11, 2021 02:56
@gugiserman gugiserman changed the title [WIP] (feat) Isometric level support (feature) Isometric level support Nov 11, 2021
@slmjkdbtl
Copy link
Contributor

Thank you! This will be an exciting feature

src/types.ts Outdated Show resolved Hide resolved
@gugiserman gugiserman force-pushed the feature/isometric-level branch 3 times, most recently from b64e604 to 04b7ead Compare November 11, 2021 03:52
src/kaboom.ts Outdated Show resolved Hide resolved
@slmjkdbtl
Copy link
Contributor

I'm not familiar with isometric games, is it common to make sprites directly in isometric format, or is it common to make sprites in normal format, but use skew transform to make it look isometric (skew transform doesn't exist in kaboom yet but is trivial to implement)?

@gugiserman
Copy link
Author

gugiserman commented Nov 12, 2021

I'm not familiar with isometric games, is it common to make sprites directly in isometric format, or is it common to make sprites in normal format, but use skew transform to make it look isometric (skew transform doesn't exist in kaboom yet but is trivial to implement)?

It is ideal to make it in isometric format from start, but there are tools and techniques to convert traditional topdown squared assets like terrain tiles into isometric formats. Sometimes the outcome is perfect and seems like it was planned and done in isometric, sometimes not so much...

For characters and other objects I think there's usually no way around, unlike terrain tilesets you can't really play around with resizing and skewing it and expect it to look good enough 😝

You can take a look at various different isometric resources, from flat terrain tiles to block ones at sites like opengameart and itch.io. I'm not sure how we would go about supporting the block tile type though, maybe it would need a Z dimension handled for each symbol...


Here's a conversion software for example (never used this one, just did a quick search now)

A block type tile for example:

Flat floor tiles:

src/kaboom.ts Outdated Show resolved Hide resolved
src/kaboom.ts Outdated Show resolved Hide resolved
@gugiserman
Copy link
Author

gugiserman commented Nov 26, 2021

@slmjkdbtl any idea what could have happened here? I simply rebased the branch and adjusted getPos() of isometricLevel to match level's interface.

image

FYI I'm dismissing your approval and requesting a new review because of this.


I just rolled back to several commits which I know for sure were working, it's not working in any of them anymore. Something changed in some of the components of kaboom that broke this, any idea what exactly could have been?

@gugiserman gugiserman force-pushed the feature/isometric-level branch 3 times, most recently from 485e0a4 to dea3ac5 Compare November 26, 2021 05:13
@gugiserman gugiserman changed the title (feature) Isometric level support Add Isometric level support Nov 26, 2021
@gugiserman gugiserman force-pushed the feature/isometric-level branch 2 times, most recently from be0dc94 to 023cb76 Compare November 26, 2021 05:15
@slmjkdbtl
Copy link
Contributor

Weird, maybe the break is introduced by 72b59c8 which does some refactoring on how game objects work, can you try if reverting to
rebase on the previous commit 03c23a2 to see if that's the case

@gugiserman
Copy link
Author

gugiserman commented Nov 26, 2021

Weird, maybe the break is introduced by 72b59c8 which does some refactoring on how game objects work, can you try if reverting to rebase on the previous commit 03c23a2 to see if that's the case

Yep, it works on top of 03c23a2. I've squashed this PRs commits because I thought it made it easier to handle and test across branches etc.

image

@slmjkdbtl
Copy link
Contributor

Thanks 👍 I'll investigate the break

@slmjkdbtl
Copy link
Contributor

Sorry for the delay. The issue should be fixed in #468, if it does feel free to merge anytime

@gugiserman
Copy link
Author

Sorry for the delay. The issue should be fixed in #468, if it does feel free to merge anytime

Thanks! But it's still pending your review before I can merge.

@slmjkdbtl
Copy link
Contributor

Sorry thought already approved 😅

Refactor isometric grid rendering

Fix isometric level demo

Improve isometric level support and add more demo examples

Lint

addIsometricLevel: Mirror width and height property names from addLevel

Remove unnecessary from2dTo1dIndex method of isometricLevel

Rename and lint isometricLevel interface to match levels
@gugiserman
Copy link
Author

@slmjkdbtl hello man, I just ran a very difficult rebase of my branch and was checking if everything is good. Can you help me out here if there's still any chance of us merging this branch? 😆

I'm getting this one error from the newly added demo when running the test suite. I assume there's a list of globals this needs to be included, but I can't seem to find it. A lot of changes since I first created this PR which is awesome 👍🏻

image

I have also noticed addLevel now returns a GameObj, but addIsometricLevel still returns a IsometricLevel. Let me know if that needs to be refactored to mirror addLevel or not really.

Other than that, it seems like everything else is in order and it still works.

image

@jumpjack
Copy link

jumpjack commented Dec 6, 2022

Does it exist a tutorial or demo for isometric games with kaboom?

@slmjkdbtl
Copy link
Contributor

Hey, sorry for very much delay on this PR. Was away from kaboom for a while and recently got back.

The level system is going to go under some big change soon so I'm thinking to merge this after the change is done so we only have to rebase to the new code once.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants