Using Slopes in Typescript

[colinvella]

Although there's a .d.ts file, it's not clear how the arcade-slopes API can be used in Typescript. Can you please provide sample code to enable and use the Slopes #plugin?

[hexus]

I've never actually done this myself because I've never used typescript. The definitions were provided by @IkonOne and, as far as I can assume, these proved helpful for him in his projects.

That said, I'm not certain the typescript definitions are completely up to date for v0.3.0, so I will go over them and make sure they are correct for v0.3.1.

Perhaps Ikon can provide some insight here.

[colinvella]

The basic problem, at least according to my limited understanding of Typescript, is that the plugin extends some JS classes with new methods, but the Typescript types are static and hence the new methods cannot be accessed.

[hexus]

The overridden methods aren't particularly important for the developer, they're used to hook into how Arcade Physics handles collisions, allowing the plugin to do so where appropriate.

The API in Typescript wouldn't be any different from JavaScript, so if you can get Phaser set up with Typescript I can't imagine it would be too difficult to do so with this plugin.

I don't hold much interest in Typescript though, so unless someone else chimes in there's not likely much more help you'll be able to get here, other than me updating the definitions for the next version.

[IkonOne]

@hexus is right that the api is the same. So, any documentation for the Javascript api is the same, so really just following that will get it working. The Usage section of the README is exactly how the typescript works. So following the steps there should work.

Is there a particular problem that you are having when following those steps?

[colinvella]

This is essentially the error I get on compiling:

src/app.ts(71,26): error TS2339: Property 'convertTilemapLayer' does not exist on type 'ArcadeSlopes'. vendor/phaser-arcade-slopes.d.ts(61,5): error TS7010: 'resolve', which lacks return-type annotation, implicitly has an 'any' return type. vendor/phaser-arcade-slopes.d.ts(156,17): error TS2304: Cannot find name 'object'. vendor/phaser-arcade-slopes.d.ts(157,14): error TS2304: Cannot find name 'object'. vendor/phaser-arcade-slopes.d.ts(238,3): error TS7010: 'clear', which lacks return-type annotation, implicitly has an 'any' return type.

which is caused by line: this.game.slopes.convertTilemapLayer(this.collisionLayer, 'arcadeslopes');

I added the plugin like this: this.game.plugins.add(Phaser.Plugin.ArcadeSlopes);

Anyhow I've given up on using Typescript due to the plugin mechanism. ES6 seems to do the job.

Thanks

On 15 October 2017 at 17:15, Erin M Gunn notifications@github.com wrote:

@hexus https://github.com/hexus is right that the api is the same. So, any documentation for the Javascript api is the same, so really just following that will get it working. The Usage section of the README is exactly how the typescript works. So following the steps there should work.

Is there a particular problem that you are having when following those steps?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/hexus/phaser-arcade-slopes/issues/50#issuecomment-336718435, or mute the thread https://github.com/notifications/unsubscribe-auth/ABL7hgXwT4loR3wC5xgHJ1G0cuxh09s-ks5ssiGFgaJpZM4P5boz .

[IkonOne]

@colinvella Yep, that is definitely not there on the ArcadeSlopes declaration. Could you try using this:

game.slopes.facade.convertTilemapLayer

[hexus]

Oh I see! That's definitely a problem then, and this can be fixed in the definitions.

game.slopes is actually an instance of the Facade, which has the definition. What version of the plugin are you using @colinvella?

[IkonOne]

@hexus Yeah, it's been a while since I have used this so I'm not as familiar with it as I used to be. That must have been how I was doing it previously, but is clearly not the right way...

Are you comfortable updating the definitions? Otherwise I can have a commit later tonight once I get home.

[hexus]

Yes, I am comfortable updating them if there proves a problem. :) Thank you though, much appreciated.

I just updated my last comment. The definition should already be correct for 0.3.0.

[IkonOne]

@hexus game.slopes is defined here which is currently set as ArcadeSlopes: https://github.com/hexus/phaser-arcade-slopes/blob/master/typescript/phaser-arcade-slopes.d.ts#L3

So the current version has the wrong type for the game.slopes variable. Maybe that line should be: slopes:Phaser.Plugin.ArcadeSlopes.Facade;

[hexus]

Ah yes! That's what needs changing, thank you. :)

[hexus]

For some reason I thought I'd already made that change. Apparently not!

The fix will be included in 0.3.1, and I'll update the rest of the internals along with it.

@colinvella feel free to just change this definition locally for now so you can get proper type hinting and compilation.

[colinvella]

@hexus I am using v0.3.0 in my Typescript project. I was running this on a C9.io project.

I am now using Phaser-CE installed via Node, running on webpack-dev-server locally on my machine. I'm using ES6 to avoid the plugin problem, and I think I'll find more support if I use JS since TS isn't used that much it seems. I've managed to get it work for the most part, setting up the slopes-based collisions using an invisible layer that uses the slopes tilesheet. That way, I can separate aesthetics from functionality, have hidden passages etc.

I am now trying to sort out a problem with jumping - the player won't jump off a slope but only off flat surfaces for some reason. I'm trying to follow the arcade slopes demo code closely to figure out why.

[colinvella]

Speaking of using Node, I've had to use expose-loader to load specific dependencies for both Phaser-CE and Aracde Slopes, like so:

// Phaser-CE
import PIXI from 'expose-loader?PIXI!phaser-ce/build/custom/pixi.js';
import p2 from 'expose-loader?p2!phaser-ce/build/custom/p2.js';
import Phaser from 'expose-loader?Phaser!phaser-ce/build/custom/phaser-split.js';

// Arcade Slopes
import SAT from "expose-loader?SAT!sat/SAT.js";
import "phaser-arcade-slopes";

[hexus]

Ah yes, this is something I'm not looking to support for Phaser 2 yet, but when Arcade Physics 2 is available for Phaser 3 I will be improving dependency handling, hopefully for both versions.

I already have an issue for it, see #41.

[hexus]

Regarding your code, are you checking wasTouching or touching? In my own usages of the plugin I've always used the touching.down property on bodies for jumping.

This makes me feel like I should provide an example project separate from the demo, to make it easier for developers to see how it can be used.

[colinvella]

@hexus indeed, I've yet to rework the jumping code as per your demo. I suspect that without wasTouching and touching, the player just gets stuck to the slope when attempting the jump, possibly caused by a reverse collision.. but that's just speculating from my part. :)

On a slightly different note, it would be nice if you could extend your slope tiles with 4 additional one way tiles - the most obvious use would be for platforms that you can jump on to from beneath, but can also be used for one way "valve-like" doors. These tiles would not block the sprite in any way except for one direction (left, right, up or down). I know it can be done using the collideDown etc. flags, but it would be nice if it were part of a complete solution. For now, I will try to extend the tilesheet myself and post-process the map for the additional tiles.

[hexus]

"Reverse" collisions shouldn't be possible in this version; undesirable collision vectors are eliminated when the layer is created (though not if the tiles are modified afterwards).

Regarding the inclusion of different one-way (or less-than-four-way) collision tiles, I considered this but the number of permutations is potentially pretty crazy. I felt it was better to leave that to users of the plugin for now. I totally agree, though, it would be very useful for quick iteration.

[colinvella]

Yeah if you had yo take into account all the slopes it would double the number at the very least.

On 16 October 2017 at 16:39, Chris Andrew notifications@github.com wrote:

"Reverse" collisions shouldn't be possible in this version; undesirable collision vectors are eliminated when the layer is created (though not if the tiles are modified afterwards).

Regarding the inclusion of different one-way-collision tiles, I considered this but the number of permutations is potentially pretty crazy. I felt it was better to leave that to users of the plugin for now. I totally agree, though, it would be very useful for quick iteration.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/hexus/phaser-arcade-slopes/issues/50#issuecomment-336907713, or mute the thread https://github.com/notifications/unsubscribe-auth/ABL7hsrXRPwO8QIg4YEphlxJfgYHs30Lks5ss2qegaJpZM4P5boz .

[hexus]

Almost quintuple if a set was made for top, bottom, left and right. :)

Anyway, I'll close this issue, it's been resolved for now.