lewster32 / phaser-plugin-isometric Goto Github PK
View Code? Open in Web Editor NEWFeature-packed axonometric plugin for Phaser 2 which stays true to the Phaser API.
Home Page: http://rotates.org/phaser/iso
License: MIT License
Feature-packed axonometric plugin for Phaser 2 which stays true to the Phaser API.
Home Page: http://rotates.org/phaser/iso
License: MIT License
-I added the picture library
-I added on top players
How do I do I do I want to come out of the water wall?
AND
After a click you help I want to go to my place with this player mous
javascript file: https://jsfiddle.net/u61kub7b/
At phaser.plugin.isometric.d.ts#L324 it is listed as a single argument, but at, phaser-plugin-isometric.js#L3767 it is two.
While trying to get up examples in Visual Studio 2015 v.3, it screams about this while trying to use
this.physics.isoArcade.intersects( this.currentPlayer.sprite.body, this.currentPlayer.sprite['target'].body )
But that is there to use. I figure I am either not using this as intended or the typing may be off?
The plugin has unexpected behaviour when Phaser, the plugin itself, and all other elements are wrapped in a container object. The most apparent of these is modifying isoZ in an isoGroup in update()
. When the logic is wrapped in an object (i.e. var env = {}; env.game = new Phaser.Game(...) )
, and the pointer interaction code is run, it acts as if a tweening motion has gone out of control.
I want to create a player isoSprite that can jump over static isoSprites but the body.static
property is undefined.
I have tried with body.immovable=true
but this cause a strange behaviour. The player can´t push the blocks but when it jumps over one of thems it pull from it when increase o decrease the body.velocity.y
. It´s very ease to replicate, take the "Basic character movement" example and add that after line 54:
cube.body.immovable=true;
Then jump over some cube and pres up or down cursor keys.
Thanks in advance
Hi,
I've noticed the anchor property, specifically changing it, is broken with the plugin, but only after setting the physics of the sprite to iso mode. The sprite's position gets radically changed. If i set the anchor to 0.001 the sprite begins to slowly move to the left (very slow lol) but if i set it to .5 its thousands of pixels away instantly, and does not continue moving.
to replicate:
create a sprite,
enable isoArcade phsyics (if you do not do this first there is no problem)
do sprite.anchor.setTo(.5); or sprite.anchor+=.5
check the position of the sprite, as its now very far away. For me I got a negative value every time.
Hi,
Based on the pointer interaction if I try to use a different asset image size, like 64*32 for example, the tile.isoBounds.containsXY don't work anymore.
This line seems to be the problem, if I remove it, it works.
https://github.com/lewster32/phaser-plugin-isometric/blob/master/src/Cube.js#L583
or am I doing something wrong ?
Need to investigate how adding children to IsoSprites behaves with the scene graph. This should work predictably, with the child objects being positioned relative to their parents axonometrically. Does this work as intended?
See this thread for more discussion: http://www.html5gamedevs.com/topic/9301-phaserpluginisometricisosprite-add-child-does-not-work/
Octree raises an error when trying to collide group vs self, and QuadTree debug visualisation is not rendering object positions.
When you put scale on sprite tile. the unproject coords no working good, you need put code like this
`haser.Plugin.Isometric.IsoSprite.prototype.resetIsoBounds = function () {
if (typeof this._isoBounds === "undefined") {
this._isoBounds = new Phaser.Plugin.Isometric.Cube();
}
this._isoBounds.widthX = Math.round(Math.abs(this.width) * 0.5);
this._isoBounds.widthY = Math.round(Math.abs(this.width) * 0.5);
this._isoBounds.height = Math.round(Math.abs(this.height) - (Math.abs(this.width) * 0.5));
this._isoBounds.x = this.isoX + (this._isoBounds.widthX * -this.anchor.x) + this._isoBounds.widthX * 0.5;
this._isoBounds.y = this.isoY + (this._isoBounds.widthY * this.anchor.x) - this._isoBounds.widthY * 0.5;
this._isoBounds.z = this.isoZ - (Math.abs(this.height) * (1 - this.anchor.y)) + (Math.abs(this.width * 0.5));
return this._isoBounds;`
I was wondering if it was possible to create objects that are not cubes.
For example, I needed an object that was a cube cut diagonally so that I have a sloped hill.
Hi,
Thank you for the plugin it's awesome !
I would like have my isoSprite move towards a pointer click, with phaser I think they are two main ways to do this:
Do you have any idea how is it possible to achieve pointer movement in isometric ?
Hi, I am a beginner of phaser. I had follow this Tutorial and I just download the code, it work normally. But if I update the phaser-plugin-isometric.min.js
to lastest version(from v0.9.1 to v0.9.2), it throw out an error:
Uncaught TypeError: Cannot read property '4' of undefined
Could any one tell me what's going on here? thx :)
I have been using MelonJS, but am eager to give Phaser a shot with this isometric plugin. A big part of developing player levels/maps is using Tiled. Has anyone tried building isometric Tiled maps for Phaser?
Hello!
Love the project, bravo!
I was wondering if there are any example games / boilerplate for seeing this plugin in action / something to kickstart my own game prototype?
I'm new to phaser but I've been ruined by yeoman, bower and npm for how easy it is in my job to start a new angularJS application.
Thanks,
Lewis
Hi, first of all thank you for amazing plugin!
var heroSprite = game.add.isoSprite(40, 40, 1, 'hero', 0);
heroSprite.anchor.set(0.5, 0);
heroSprite.inputEnabled = true;
heroSprite.input.enableDrag();
But hero's sprite only blinking when I trying to drag it.
Can I use drag and drop feature from phaser?
Hello,
Current npm version consist from 0.9.2, please update npm version to latest release
Hello,
I'm running into an issue where I need to update a sprite's isoPosition at a specific time interval. Basically I'm communicating a sprites position to a Node server from different browser clients and verifying those positions via websocket at a consistent time interval.
For example, I can replicate the issue i'm seeing if I add the following code snippet after line 80 for the example on: http://rotates.org/phaser/iso/examples/character.htm
setInterval(function() {player.isoX = 128; player.isoY = 128}, 1000);
Once you move the cube sprite using the keyboard, you will see the sprite start to flicker and constantly change positions in a seemingly random fashion.
It's super weird and I can't figure out how to resolve it.
Maybe their is a better way to update a sprite's position?
Awesome plugin BTW 👍
Hi,
phaser-plugin-isometric is not found on npmjs: https://www.npmjs.org/package/phaser-plugin-isometric
Is it possible to publish this package to npm?
npm publish
I'm running on this error that seems to be related that the file published both on bower and npm is not the same that we can find in the dist's master branch. The error is caused by a line testing this.sprite._cache[4] === 1
in the minified version. If I copy the minified version from the master an paste it locally it works.
I believe you just need to republish the package.
Hi, I've the need to scale the camera (zoom-in/out).
when i scale it the mouse isometric position is not correctly rescaled.
(try to scale http://rotates.org/phaser/iso/examples/interaction.htm camera as example).
how can i resolve this issue?
I drew a tile map with a polygon tiles (ratio 2:1).
I have used game.iso.anchor.setTo(0.5, 0); to set X axes to the center of my viewport but I would like also center the Y axes.
For center of Y axes I not mean the top corner of the map but the center of the map.
If I use game.iso.anchor.setTo(0.5, 0.5); I obtain that the top corner of the map is placed in the vertical center of the viewport.
How can I solve?
Is the following correct: https://stackoverflow.com/questions/39799689/phaser-how-to-rotate-an-isometric-body
If not, can we rotate the tile like the link above describes?
I met this error error TS2339: Property 'containsXY' does not exist on type 'Point3'.
with my code
isoGroup: Phaser.Group;
...
this.isoGroup.forEach((tile: Phaser.Plugin.Isometric.IsoSprite) => {
let inBounds: boolean = tile.isoBounds.containsXY(
this.cursorPos.x,
this.cursorPos.y
);
I found this lines of code in in phaser.plugin.isometric package
phaser.plugin.isometric.d.ts
:
class IsoSprite extends Phaser.Sprite {
...
isoBounds: Phaser.Plugin.Isometric.Point3;
...
}
But in phaser-plugin-isometric.js
:
Phaser.Plugin.Isometric.IsoSprite.prototype.resetIsoBounds = function () {
if (typeof this._isoBounds === "undefined") {
this._isoBounds = new Phaser.Plugin.Isometric.Cube();
}
...
};
In runtime console.log
of any Phaser.Plugin.Isometric.IsoSprite
instance shown that it has in __proto__
key isoBounds
with instance of Phaser.Plugin.Isometric.Cube
as a value
In character control examples such as this, often pushed objects will 'stick' to the character when the character reverses direction. Need to check if this also happens in standard Phaser.Physics.Arcade when using the same parameters or if this is a biproduct of the z axis separation.
There's no license information available for this plugin
EDIT: Sorry, I have only now seen there is on the source files. Still, it would be nice to have it on README or in its own file. Closing this.
In this example: http://www.rotates.org/phaser/iso/examples/character.htm
When holding both arrowkeys and then trying to jump, it doesn't work. The other directions work though.
And now in my own game, I experience the same problem, that jumping doesn't work while walking in one specific direction.
How to fix this?
As found here I set the 3D world bounds of my world like this in the preload callback:
game.physics.isoArcade.setBounds(-30, -30, 0, 100, 100, 150);
And in the render callback I use octree to display the world bounds:
game.debug.octree(game.physics.isoArcade.octree, '#FFFFFF');
game
is an instance of Phaser.Game
This results in the following being displayed:
Which is wrong because the white wireframe does not actually reflect the world bounds. In fact, whatever I pass to setBounds, the white wireframe stays the same size.
So after spending a while on navigating through the code I found out that the setBounds function (which is part of the Phaser.Plugin.Isometric.Arcade
class, see source code) calls the setTo
function on this.bounds
which is a Phaser.Plugin.Isometric.Cube
, simply passing on its parameters.
However, octree uses a completely different property in its own class to hold the current world bounds (see source code), which is never updated.
Since octree updates its data in the reset function, which is called in the constructor, I tried game.physics.isoArcade.octree = new Phaser.Plugin.Isometric.Octree( game.physics.isoArcade.bounds.x, ......);
directly after the call to setBounds
from above and the bounds are correctly displayed:
But I don't think this is the correct way of doing it. the setBounds
function should handle changes to the bounds on its own. Maybe octree is not the only part which should be updated whenever the world bounds change.
So: Is this a bug?
It seems reasonable to me to assume that I can change the world bounds with a single call and not have to worry about other stuff getting updated correctly. If that's not the case though: Where am I expected to find that information? Googling for "phaser isometric world bounds" and the like, I found multiple websites mentioning game.world.setBounds(x, y, width, height);
(e.g. this and this), which does not really make sense when using isometric world space. There are also a few abandoned questions about this (e.g. this).
I was lucky to find this post mentioning the 3D version of the setBounds
function.
There seems to be an issue that as far as I can tell is not related to the projector which is causing awkward and inconsistent rounding of pixel art. The problem may be related to anchors (both sprite and the projector offsets) the dimensions of the assets used, screen positions or some combination of all of these factors.
Hi @lewster32,
first of all thanks a lot for this awesome plugin!
I recently fell in love with isometric projection ❤️ and I want to create a game with Phaser 3. Therefore I started porting your plugin be compatible with Phaser 3 (which includes some breaking changes). I'm pretty new to Phaser and game development in general but I already got the basic projection part working (adding iso sprites to the scene). There is still some work left to do though (mainly the physics part and still some problems with the anchors of the isosprites - there are no more anchors in Phaser 3).
Now I'm wondering if it's OK for you, that I create a pull-request so maybe you can have a look at the code as well and as soon as it is finished it can be merged to this repository. Or if you'd prefer me to fork this repo so I can maintain the Phaser 3 version seperately.
I think I'd go for the first option and keep a tag of the current version, so it still can be used for Phaser 2. What do you think?
It seems that using groups for both collision and depth sorting is quite inefficient. There are situations where you'd want the whole scene to be depth sorted, but only partial elements of it to be collision checked.
Consider a player in a scene full of objects, where you're not especially concerned about collisions between objects but you do want the player to collide with things (maybe a level made of static IsoSprites). In this situation, you only want to call collide between the player and the objects, and make use of the QuadTree/Octree for speed, but unless you pass a group in, the collision handler will simply check all objects in the scene.
Also, because IsoSprites usually need to be depth sorted, it feels like there should be a container that handles this automatically. With this in mind, I feel like an IsoGroup or IsoScene (or both) container should be implemented just to handle display ordering, and then groups could be placed in that to handle collision and so on, while allowing the groups to be used for collisions.
Any thoughts?
I want to move a player object based on the mouse events, is there any way to achieve this?
I am not able to find this in the docs. Thank you.
In the prototype for isoSprite , there's no way for _isoSpriteChanged to ever get set false, so every update cycle the it updates the isoSprite, regardless of need and has to re-do the math for resetBounds and depth.
Phaser.Plugin.Isometric.IsoSprite.prototype._project = function () {
if (this._isoPositionChanged) {
this.game.iso.project(this._isoPosition, this.position);
if (this.snap > 0) {
this.position.x = Phaser.Math.snapTo(this.position.x, this.snap);
this.position.y = Phaser.Math.snapTo(this.position.y, this.snap);
}
this._depthChanged = this._isoPositionChanged = this._isoBoundsChanged = true;
}
};
This can be changed to be:
this._isoPositionChanged = false;
this._depthChanged = this._isoBoundsChanged = true;
After this change, it requires that isoSprite positioning is changed only using isoSprite.isoX, isoSprite.isoY, and isoSprite.isoZ because those setters update the _isoPositionChanged flag, or with body.reset if there is a body.
If the position is updated using isoSprite.isoPosition.setTo(x,y,z) , _isoPositionChanged never gets set and thus the position.x, position.y remain unchanged.
Depth sorting fails when an object is directly on top of another moving in the -x-y direction, as it reaches the back corner of the object below. Possibly need to explore a topological sort method as outlined here: http://mazebert.com/2013/04/18/isometric-depth-sorting/
Hi!
I am trying without result to draw a tilemap
The projectionangle seems to play an important role (my tiles are 14h 16w)
more info on it would be nice and how to use it.
Is it possible to draw staggered maps?
thanks
My preemptive apologies if this is a silly question—I'm still a typescript/js noob.
When I try to add this plugin, I get a Typescript error:
/// <reference path="../lib/phaser.d.ts" />
/// <reference path="../lib/phaser.plugin.isometric.d.ts" />
var game = new Phaser.game(
// game stuff
)
game.plugins.add(new Phaser.Plugin.Isometric(game)); // <- error here
The error is: "error TS2345: Argument of type 'Isometric' is not assignable to parameter of type 'PluginConstructorOf'. Type 'Isometric' provides no match for the signature 'new (...parameters: any[]): Plugin'"
I've trawled through Phaser's Plugin
types and tried to hack things together to make it work but haven't had success so far, probably solely because of my own incompetence. I'm pretty sure this is the relevant section in Phaser. Any help is hugely appreciated!
Hello, I'm using this plugin with Phaser CE 2.10.0. Tried using Typescript but had a few blockers due to a few types that seems to be incorrect. Maybe others who have faced the same issues with Typescript can chime in as well.
I found one fork that has the updated, working typed definitions (I tried it myself in my project, it works seamlessly). So what do you think @kekel87, any plans to merge your type definitions here?
Or maybe others have already newer or even better typed definitions to be merged here?
Thank you. Great plugin, btw.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.