GDevelop icon indicating copy to clipboard operation
GDevelop copied to clipboard

Ldtk file support for tilemaps in Gdevelop

Open blurymind opened this issue 4 years ago • 55 comments

This adds support for ldtk parsing in gdevelop. imageimage

It also makes an attempt at loading resources from relative paths to the tilemap file (auto - loading textures from paths in the tilemap file) - this is required since ldtk can have a different atlas for each layer/map and can have many maps and atlases in a single file

Todo

  • [ ] add tests
  • [ ] add some examples
  • [x] update to latest pixi-tilemap and implement layer opacity in parser
  • [x] add rotated tiles support for ldtk (rework the existing one to work on both
  • [x] add layer opacity for tiled files too
  • [x] register pixi tilemap as a renderer plugin in the runtime + fix other regressions
  • [ ] ~remove all arrow functions from the helper module. Note from 4ian: no need for this~
  • [ ] fix regressions from merging dev (changing map at runtime no longer works)
  • [ ] implement a better approach for handling loading of multiple resources found in the json file's relative path entries

closes https://github.com/4ian/GDevelop/issues/2434

blurymind avatar Jul 21 '21 08:07 blurymind

It looks like I need to get to pixi renderer that gdevelop uses in order to register this now pixi>core> Renderer.registerPlugin('tilemap', TileRenderer as any); https://github.com/pixijs/tilemap/issues/124#issuecomment-884005578

@4ian what would be the correct way to do that in gdevelop? Should this be done from the extension files?

blurymind avatar Jul 21 '21 11:07 blurymind

I think I can use this to get to the renderer in the runtime.Now how to do it in the ide

      const pixiRenderer = runtimeScene
        .getGame()
        .getRenderer()
        .getPIXIRenderer();

might have to add a getter

blurymind avatar Jul 21 '21 17:07 blurymind

InstancesEditor has this line

    this.pixiRenderer = PIXI.autoDetectRenderer(
      {
        width: this.props.width,
        height: this.props.height,
        preserveDrawingBuffer: true,
        antialias: false,
      }
      // Disable anti-aliasing(default) to avoid rendering issue (1px width line of extra pixels) when rendering pixel perfect tiled sprites.
    );

I need to somehow pass this.pixiRenderer to the extension so I can do what was suggested by pixi-tilemap devs renderer.plugins.tilemap = new TileRenderer(renderer);

EDIT: I think I can do it now via InstancesEditor>LayerRenderer>ObjectsRenderingService

blurymind avatar Jul 21 '21 17:07 blurymind

I managed to pass it through and register this as a pixi plugin. Now ther is another issue however image

PIXI.utils method is missing? I do seem to have it

EDIT: Ah I got it, there is a bug in pixi-tilemap.its in utils.utils!

blurymind avatar Jul 21 '21 18:07 blurymind

@blurymind question on this:

Would it be possible to have it surface int grid and entity data in the parser, even if it's not utilized in the engine currently?

My thought is that would allow a separate PR down the road that anyone could take up that could allow for people to build logic based off Int Grid and Entity stuff from LDTK files. (I think?)

Or would passing data that's not used break stuff?

Silver-Streak avatar Jul 22 '21 03:07 Silver-Streak

@blurymind question on this:

Would it be possible to have it surface int grid and entity data in the parser, even if it's not utilized in the engine currently?

My thought is that would allow a separate PR down the road that anyone could take up that could allow for people to build logic based off Int Grid and Entity stuff from LDTK files. (I think?)

Or would passing data that's not used break stuff?

This pr adds support for both autolayers and intGrid already! https://github.com/4ian/GDevelop/pull/2828/files#diff-230804730aae7eef4ce89228e9120570e8e383b295c728892644045c056baa23R458

Entities however are for another pr as they require some careful planning.

I can add an expression to gdevelop, which lets you get data from ldtk maps in the event sheet. From there on you can use it to set things. That would be potentially simple to do, but it will leave you with the task of manually setting things up with the event sheet

blurymind avatar Jul 22 '21 06:07 blurymind

@4ian for some reason I now get this crash when clicking on an instance, I wonder if its missing something on the c++ engine still image

The tilemap properties are still accessible if you select it from the object

blurymind avatar Jul 22 '21 11:07 blurymind

@blurymind This means you have an outdated libGD.js, can you try to npm install and npm start again in newIDE/app? If you have compiled the C++ sources (in GDevelop.js) yourself, you need to recompile - otherwise it will download the latest version online when you run npm start :)

4ian avatar Jul 22 '21 12:07 4ian

@blurymind This means you have an outdated libGD.js, can you try to npm install and npm start again in newIDE/app? If you have compiled the C++ sources (in GDevelop.js) yourself, you need to recompile - otherwise it will download the latest version online when you run npm start :)

thanks, that sorted it :) I pasted the code twice from my other repository by mistake which was causing this issue. Fixed now

blurymind avatar Jul 22 '21 13:07 blurymind

@4ian I added support for flipped ldtk tiles. image

Note that we can now do this to flip them (rotate option,corresponds to pixi's rotate):

 const pixiTilemapFrame = pixiTileMap.tile(
                tileTexture,
                xPos,
                yPos,
                { alpha: layer.opacity, rotate }
              );

so there is no need for caching and complicated code. Should I remove that from how tiled does it? I am having trouble understanding how exactly you are getting the rotation for it.

EDIT: I will try today to remove the need to cache flipped tiles when parsing tiled.

blurymind avatar Jul 22 '21 19:07 blurymind

@4ian where should I add my examples to? I remember the demo projects got moved to another repository.

Also about tests - by that do you mean just example projects testing if specific features work? What is a good example of an extension test?

blurymind avatar Jul 23 '21 17:07 blurymind

@4ian I got the ldtk resource to automatically pull atlases and add them via the resource manager, but there is one problem.

If the user deletes the atlas from resources that ldtk added and then hits the play button - because the update method that checks these depepndencies and adds the atlases is not ran again - the game starts with no atlas.

Do we have a life cycle method we can use in JsExtension.js that is triggered right before the game is playtested? I think that if I trigger my update method whenever the user playtest - then ldtk will always start with its dependency atlas resources, regardless if someone deletes them.

If we can get this to work well, it can also be done for tiled json files which also contain relative paths to any atlases and even tileset jsons. The user will no longer be limited to one atlas,one tileset and have to manually select them

blurymind avatar Jul 23 '21 18:07 blurymind

@blurymind can you describe how this automatic importing works? (Sorry I'm on holidays so no time to dive in the code at the moment :)) I can then check where it's best to do that.

4ian avatar Jul 26 '21 19:07 4ian

@blurymind can you describe how this automatic importing works? (Sorry I'm on holidays so no time to dive in the code at the moment :)) I can then check where it's best to do that.

Ah no worries, hope its going well :)

The way it works is very basic atm, but it does the trick of automatically adding image resources when an ldtk resource is added.

When parsing the ldtk file, the tilemap helper passes the ldtk files's path as well as the texture's relative path https://github.com/4ian/GDevelop/pull/2828/files#diff-230804730aae7eef4ce89228e9120570e8e383b295c728892644045c056baa23R190

to

https://github.com/4ian/GDevelop/pull/2828/files#diff-7a3c239ffb464bda6f26203444781052cf8022fa89f851ded73b03077215000cR659

to this._pixiResourcesLoader.getPixiTextureRelativeToFile

Then with the ldtk file's path and the relative path to the texture from it, this is passed to https://github.com/4ian/GDevelop/pull/2828/files#diff-8aa3ba6d7875a6046f13fd522a758e611022d74ad44af14b7c503b5d489fdf63R143

which uses the data to figure out the absolute path of the texture which the ldtk file is trying to add. Then finally the resource is added by gdevelop's resources manager.

That is of course, if it didnt exist already. So when you load an ldtk file, you dont need to also specify any atlas textures like tiled does. Just point it to the ldtk file and the ldtk file will point gdevelop to all the atlases it needs.

There is a problem from this, which is that it is not a pure dependency being tracked and the user can easily break it by manually deleting the resource which ldtk pulled when it was parsed, then playtest the game.

I was wondering if I should trigger this somehow every time before playtesting or exporting a game, but I'm not sure if we have a JsExtension lifecycle that does that or if this is the best way to go.

Having a mechanic to add new resources directly and automatically like that can be very very helpful in also improving the UX for tiled - as that also contains information about resources it uses and their relative paths and we are still limiting users to only one atlas there.

In this PR I am overcoming that limitation and its much faster to set up a map by selecting a single file, but it comes with some caveats which needs to be figured out. This happens to be the simplest thing I could come up with to do it, but it might not be the right way to go or at a minimum requires at least being triggered before the game runs or is exported from the extension and I dont know how to do that

blurymind avatar Jul 27 '21 12:07 blurymind

I see! So currently it's a bit hacky indeed, I think we could have something like:

  • a JsExtension.js file can "hook" a function called whenever a resource is added. This allows you to add a new resource or more if there are references to other files.
  • the editor will call this function when a resource is added or when the user ask to "refresh" it

Nothing fairly obvious though to do, can be postoponed, but we'll need to clean that up before committing this.

4ian avatar Jul 27 '21 16:07 4ian

@blurymind Just seeing where this one is at. Are we waiting on other input from 4ian, or are the changes mentioned above things he is meant to be doing?

I've been putting off any more level design stuff until I can just outright do it directly in LDtk without the migration steps. 😆

Silver-Streak avatar Aug 04 '21 06:08 Silver-Streak

@blurymind Just seeing where this one is at. Are we waiting on other input from 4ian, or are the changes mentioned above things he is meant to be doing?

I've been putting off any more level design stuff until I can just outright do it directly in LDtk without the migration steps. 😆

Yes it needs a formal review :) he's on holiday atm I believe.

The rendering functionality is all there now. I can start making a demo project, but don't know to which repository. The examples have been moved to another tracker I believe

blurymind avatar Aug 04 '21 07:08 blurymind

Examples are now over here: https://github.com/GDevelopApp/GDevelop-examples/

Silver-Streak avatar Aug 04 '21 07:08 Silver-Streak

Just pinging @4ian as unless I misunderstand, this is just awaiting review. This will likely give folks a workaround for https://github.com/4ian/GDevelop/pull/2296, as well.

Silver-Streak avatar Aug 20 '21 22:08 Silver-Streak

Added to my list, hope to have a first review done early this week!

4ian avatar Aug 22 '21 17:08 4ian

Thanks for reviewing this @4ian :) I will have a look over the weekend

blurymind avatar Aug 25 '21 08:08 blurymind

Just a general check in on how we're feeling on current state/next steps, @blurymind

Silver-Streak avatar Aug 31 '21 15:08 Silver-Streak

I have some review notes to address on the pr, but might be away for a bit due to travel the next few days.

There is one overarching problem which I'm not sure how we will address - which is the ability to dynamically load resources dependent to a resource. The way it's done at the pr works, but is a bit hacky.

On Tue, Aug 31, 2021 at 4:53 PM Silver-Streak @.***> wrote:

Just a general check in on how we're feeling on current state/next steps, @blurymind https://github.com/blurymind

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/4ian/GDevelop/pull/2828#issuecomment-909362903, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABRRWVM3C3U6LBXIXBQJ7MDT7T3GDANCNFSM5AXPB23A . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

blurymind avatar Aug 31 '21 15:08 blurymind

Thanks for the update! Also, have a good (and safe) trip.

Not sure if @4ian has any guidance on the resource loading. I'd imagine this would also be beneficial for a bunch of different items long term (one being if a music editor is ever integrated).

Silver-Streak avatar Aug 31 '21 15:08 Silver-Streak

@Silver-Streak thank you! :)

The biggest other potential feature that could benefit from this is dragonbones animation resources imo. They work on the same principle - you load a json file, which pulls a bunch of other files relative to it.

blurymind avatar Aug 31 '21 16:08 blurymind

As I'm working on migrating the other bounty (LDtk bundling) over to Rysolv, I was reminded of this one. Just wanted to check in with @4ian and @blurymind on this one to see if a solution had been found for the resource loading/next steps?

Silver-Streak avatar Sep 14 '21 13:09 Silver-Streak

Checking in on here again for @4ian and @blurymind as a partial heads up: Bountysource seems to be nearing abandonment. I'm seeing more and more posts on their github where people are waiting months to get paid out, if at all. Their Github login integration has broken, so if you don't have a valid cookie you cannot sign in to your account via Github anylonger.

So rather than just interest, we probably want to finish this one out as soon as feasible so that the funds don't get lost in the aether.

Silver-Streak avatar Sep 19 '21 09:09 Silver-Streak

Hi, I am sorry for the delayed replies. I'm on a holiday atm, so time is limited. I can still get to the laptop and work on it during the week, but the problem with the resource dependencies will still be there.

My understanding from @4ian is that we still need to come up with a better solution for that than what is in the pr.

The other review notes are simple to address and shouldn't take me long. I also need to upload my demo project to another git repo I think.

On Sun, 19 Sep 2021, 12:33 Silver-Streak, @.***> wrote:

Checking in on here again for @4ian https://github.com/4ian and @blurymind https://github.com/blurymind as a partial heads up: Bountysource seems to be nearing abandonment. I'm seeing more and more posts on their github where people are waiting months to get paid out, if at all. Their Github login integration has broken, so if you don't have a valid cookie you cannot sign in to your account via Github anylonger.

So rather than just interest, we probably want to finish this one out as soon as feasible so that the funds don't get lost in the aether.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/4ian/GDevelop/pull/2828#issuecomment-922443940, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABRRWVKKHERJCQDVO23UXVDUCWVABANCNFSM5AXPB23A . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

blurymind avatar Sep 19 '21 10:09 blurymind

Hi, I am sorry for the delayed replies. I'm on a holiday atm, so time is limited. I can still get to the laptop and work on it during the week, but the problem with the resource dependencies will still be there. My understanding from @4ian is that we still need to come up with a better solution for that than what is in the pr. The other review notes are simple to address and shouldn't take me long. I also need to upload my demo project to another git repo I think.

No worried at all. I just wanted to make folks aware of the current state of Bountysource. Any future bounties I post will be through Rysolv, and I am working towards trying to pull the full ldtk integration/bundling funds from bountysource to move there.

I will not be able to do so with the funds for this current effort's bounty, so I wanted to ensure we kept awareness up/kept an eye out. Please enjoy your holiday!

Silver-Streak avatar Sep 19 '21 14:09 Silver-Streak

Hey @blurymind, it's been ~a month since the last update. Just checking in if you're still on holiday or if there's an update?

Silver-Streak avatar Oct 15 '21 15:10 Silver-Streak