PhaserJS collision tilemap not working - json

I have a tilemap that only 1 layer is correctly colliding with the player. Been through all the examples, but i can't seem to get it working on multiple layers.
I have 1 tilemap that contains all the json data for a total of 13 layers, but for the example i have only included 3.
I would like for the player to collide with different layers and have different callbacks, e.g. cannot walk through, pick up item if within range etc. but all using 1 spritemap/tilemap.
var game = new Phaser.Game(1200, 780, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render });
function preload() {
this.load.tilemap('main_map', 'img here', null, Phaser.Tilemap.TILED_JSON);
this.load.image('sprite_map', 'img here');
this.load.image('player_image', 'img here');
}
var map;
var tileset;
var bLayer;
var wLayer;
var player;
var sLayer;
var cursors;
function create() {
game.physics.startSystem(Phaser.Physics.ARCADE);
// initiallize the tilemap
map = game.add.tilemap('main_map');
map.addTilesetImage('otherNew', 'sprite_map');
//draw the layers
bLayer = map.createLayer(0);
wLayer = map.createLayer(1);
sLayer = map.createLayer(2);
wLayer.resizeWorld();
player = game.add.sprite(600, 600, 'player_image');
game.physics.arcade.enable(player);
player.body.collideWorldBounds = true; // works
//game camera and movment keys here
}
function update() {
game.physics.arcade.collide(player, wLayer); // DOES NOT WORK
game.physics.arcade.collide(player, sLayer); // THIS WORKS
map.setCollision(1, true, wLayer); // DOES NOT WORK
map.setCollision(2, true, sLayer); // THIS WORKS
//movement here already works so didn't include
}

I'm thinking that your wLayer.resizeWorld(); function makes your tilemap's width/height the size of the world. Looks like this is the only difference between wLayer and sLayer.
Setting width/height in Phaser does not automatically resize the collision body. To do that, use the setSize function.
To view your current body, use Phaser's debug methods
this.game.debug.body(someSprite, 'rgba(255,0,0,0.5)');

The answer is that each layer has its own set of tilemaps, and as i was using a spritesheet to generate each layer, those layers had some value that needed to be set. I didn't have the patience to check what actual collision layer I needed, but as I had split them all up into separate logical layers I just set between 0, 100 for each.
// In the create section
map.setCollisionBetween(0, 100,true, wLayer,true);
map.setCollisionBetween(0, 100,true, sLayer,true);

Related

AS3 drawing Sprite on BitmapData memory leak

I have an AIR app that renders images from a Flash editor. You can customize several surfaces - they all have the same width and height. Each surface is then rendered by the AIR app.
I'm struggling with a memory leak I fail to address.
For each surface I need to render, I have a Sprite containing many components (other sprites - some having event listeners, BitmapDatas and other children components, sprites, etc).
I'm already aware of BitmapData issues to be garbage collected, I tested both :
creating a new BitmapData for each rendering then dispose() and point to null
reuse a single BitmapData for each rendering
Memory leak is still happening in equal proportion.
Here is my loop :
var bm:BitmapData = new BitmapData(destDim.x, destDim.y, true, bgColor);
var mtx:Matrix = new Matrix();
trace('before drawing :'+(System.privateMemory/1024));
bm.draw(myBigSprite, mtx, null, null, null, true);
trace('after drawing :'+(System.privateMemory/1024));
var result:Bitmap = new Bitmap(bm, PixelSnapping.NEVER, true);
//return result and encode Bitmap to png
result.bitmapData.dispose();
result.bitmapData = null;
result = null;
Result :
before drawing :208364
after drawing :302816
Wrote bitmap to file: surface0.png
before drawing :303296
after drawing :446160
Wrote bitmap to file: surface1.png
before drawing :446160
after drawing :565212
Wrote bitmap to file: surface2.png
before drawing :565924
after drawing :703100
Wrote bitmap to file: surface3.png
before drawing :703572
after drawing :834420
Wrote bitmap to file: surface4.png
I feel like I'm missing something in draw function behaviour. It seems like I have newly created instances of the components of myBigSprite that persists after draw operation.
I tried to completely destroy myBigSprite at the end of each loop, it does not change anything....
Any hint would be appreciated !
Ok guys, I eventually understood and fixed this issue.
First of all, I installed and ran Adobe Scout. Excellent tool.
As you may not see (plus it's in French language), I generated 3 surfaces corresponding to the edges. The "big" green bar on the right which is mass memory consuming represent "Bitmap display objects". Interesting ! Never heard of those before.
A Google search later, I found this article : https://help.adobe.com/en_US/as3/dev/WS5b3ccc516d4fbf351e63e3d118a9b90204-7e26.html
It explains
For example, in the code excerpt shown earlier, once the load
operation for the pict Loader object is complete, the pict object will
have one child display object, which is the bitmap, loaded. To access
this bitmap display object, you can write pict.getChildAt(0).
So I began to undestand that, somehow, maybe Bitmap object are attached as children on some objects of myBigSprite.
Finally, I created a recursive function to search and destroy all Bitmap, BitmapData and ByteArray objects contained in myBigSprite AFTER the draw operation
//inside render function
bm.draw(myBigSprite, mtx, null, null, null, true);
destroyDisplayObjects(myBigSprite);
...
private function destroyDisplayObjects(obj):void{
if ("numChildren" in obj){
for (var i:int = 0; i<obj.numChildren; i++)
{
destroyDisplayObjects(obj.getChildAt(i));
}
}
else {
if (flash.utils.getQualifiedClassName(obj) == "flash.display::Bitmap"){
//trace ('FREE BITMAP');
obj.bitmapData.dispose();
obj.bitmapData = null;
obj = null;
return;
}
else if (flash.utils.getQualifiedClassName(obj) == "flash.display::BitmapData"){
//trace ('FREE BITMAPDATA');
obj.dispose();
obj = null;
return;
}
else if (flash.utils.getQualifiedClassName(obj) == "flash.display::ByteArray"){
//trace ('FREE BYTEARRAY');
obj.clear();
obj = null;
return;
}
return;
}
}
Et voilĂ , memory is 100% cleaned after the draw operation, no more leak :)
You should declare you Bitmap and BitmapData outside of any functions and then simply recycle them for usage inside of your loop (instead of creating a new anything to be added in memory).
Use .dispose() only on the last image when you're sure you don't need bitmap data from bm variable anymore. Otherwse, if disposed, you'll have to create a new alternative var someThing :BitmapData = new BitmapData again for further usage.
////# declare globally (not inside some specific function..)
//var destDim :Point = new Point(your_X_num , your_Y_num);
//var bgColor :uint = 0x505050;
var bm:BitmapData = new BitmapData(destDim.x, destDim.y, true, bgColor);
var result:Bitmap = new Bitmap(bm, PixelSnapping.NEVER, true);
//result.bitmapData = bm; //can be set here but done within function for clarity...
var mtx:Matrix = new Matrix();
////# update bitmap by replacing its bitmapdata with new colour values of existing pixels
function Here_is_my_loop (): void
{
trace('before drawing :'+(System.privateMemory/1024));
//overwrite pixel colours in bitmap (result)
bm.draw(myBigSprite, mtx, null, null, null, true);
result.bitmapData = bm; //update bitmap
trace('after drawing :'+(System.privateMemory/1024));
//return result and encode Bitmap to png
//result.bitmapData.dispose();
//result.bitmapData = null;
//result = null;
}

Leaflet 0.7.7 Zoombased layer switching separated by theme

We are working on a school project where the aim is to create a map in which based on the amount of zoom the layer switches from one aggregate level to a smaller aggregate level. Additionally, we have several groups of layers based on a theme for which this needs to apply. So you'd click on a theme and a new group of layers that switches based on zoom level become active and when you click another theme another group of layers become active and switch based on zoom level. This means that the themes are exclusionary, ideally you can't have more than one theme active at a time.
We tried to make this work in several ways already but without much success. Using the L.Control.Layers we were unable to group different layers together under one radio button and have them switch based on zoom since the layer control build into leaflet always splits them up into separate ones. Even using L.layerGroup to combine several layer variables or creating several layers into one variable and then adding them to the map using l.control.layer.
We also tried to use L.easyButton (https://github.com/CliffCloud/Leaflet.EasyButton). This allowed us to put the variables under one button and add a zoom based layer switching inside of it. However, the issue here is that we are unable to deactivate the functionality once activated. Which results in several of them being active at one point and overlapping each other.
If possible we would like to know if we should use a different approach or if either the leaflet control function or the use of easyButton could work and how?
This is example code for one of the buttons, which would appear several times but show a different theme:
L.easyButton( '<span class="star">&starf;</span>', function (polygon) {
var ejerlav_polygon = new L.tileLayer.betterWms(
'http://[IP]:[PORT]/geoserver/prlayer/wms', {
layers: 'prlayer:ejerlav',
transparent: true,
styles: 'polygon',
format: 'image/png'});
var municipality_polygon = new L.tileLayer.betterWms(
'http://[IP]:[PORT]/geoserver/prlayer/wms', {
layers: 'prlayer:municipality',
transparent: true,
styles: 'polygon',
format: 'image/png'});
map.on("zoomend", function() {
if (map.getZoom() <= 10 && map.getZoom() >= 2) {
map.addLayer(municipality_polygon);
} else if (map.getZoom() > 10 || map.getZoom() < 2) {
map.removeLayer(municipality_polygon);
}
});
map.on("zoomend", function() {
if (map.getZoom() <= 11 && map.getZoom() >= 11) {
map.addLayer(ejerlav_polygon);
} else if (map.getZoom() > 11 || map.getZoom() < 11) {
map.removeLayer(ejerlav_polygon);
}
});
}).addTo(map);
If my understanding is correct, you would like to give the user the ability to switch between "themes" (some sort of group of layers that switch themselves based on the map current zoom level), possibly using Leaflet Layers Control?
And regarding the switch based on map zoom, you cannot just change the Tile Layer template URL because you use some WMS?
As for the latter functionality (switching layers within a group / theme based on map zoom), a "simple" solution would be to create your own type of layer that will listen to map "zoomend" event and change the Tile Layer WMS accordingly.
L.LayerSwitchByZoom = L.Class.extend({
initialize: function (layersArray) {
var self = this;
this._layersByZoom = layersArray;
this._maxZoom = layersArray.length - 1;
this._switchByZoomReferenced = function () {
self._switchByZoom();
};
},
onAdd: function (map) {
this._map = map;
map.on("zoomend", this._switchByZoomReferenced);
this._switchByZoom();
},
onRemove: function (map) {
map.off("zoomend", this._switchByZoomReferenced);
this._removeCurrentLayer();
this._map = null;
},
addTo: function (map) {
map.addLayer(this);
return this;
},
_switchByZoom: function () {
var map = this._map,
z = Math.min(map.getZoom(), this._maxZoom);
this._removeCurrentLayer();
this._currentLayer = this._layersByZoom[z];
map.addLayer(this._currentLayer);
},
_removeCurrentLayer: function () {
if (this._currentLayer) {
map.removeLayer(this._currentLayer);
}
}
});
You would then instantiate that layer "theme" / group by specifying an array of layers (your Tile Layers WMS), where the array index corresponds to the zoom level at which that Tile Layer should appear.
var myLayerSwitchByZoomA = new L.LayerSwitchByZoom([
osmMapnik, // zoom 0, osmMapnik is a Tile Layer or any other layer
osmDE, // zoom 1
osmFR, // zoom 2
osmHOT // zoom 3, etc.
]);
Once this new layer type is set, you can use it in the Layers Control like any other type of Layer / Tile Layer, etc.
L.control.layers({
"OpenStreetMap": myLayerSwitchByZoomA,
"ThunderForest": myLayerSwitchByZoomB
}).addTo(map);
Demo: http://jsfiddle.net/ve2huzxw/85/
Note that you could further improve the implementation of L.LayerSwitchByZoom to avoid flickering when changing the layer after zoom end, etc.

Compositing the stage's last frame

I've created a series of classes that can be used to generate and render images. I want to store a copy of the last frame displayed so I can mix it with the current frame to create a video sustain effect. A brief overview of the classes involved in this example:
MasterContainer: a subclass of Sprite used as the main display object. Generative classes are placed in the MasterContainer, and redrawn when the container is told to render
CustomWave: a subclass of Shape used to contain, draw, and manipulate a GraphicsPath object. One of the aforementioned 'generative classes'
My current attempt involves the use of two MasterContainer objects - one for the current frame, and one for the last frame. If I'm not mistaken, the current appearance of one MasterContainer (and its children) can be copied to the other with a command like lastMaster.graphics.copyFrom(master.graphics);. Consider the following code:
var time:Number;
var master:MasterContainer = new MasterContainer(); //current frame
var lastMaster:MasterContainer = new MasterContainer(); // last frame
var wave:CustomWave = new CustomWave(new <Number>[0,0,0,0],0xffffff,5); //generator for current frame
master.RegisterComponent(wave); //adds CustomWave and registers with the rendering loop
addChild(lastMaster); //add last frame to stage
addChild(master); //add current frame to stage
addEventListener(Event.ENTER_FRAME, perFrame);
function perFrame(event:Event):void{
time = 0.001 * getTimer();
lastMaster.graphics.copyFrom(master.graphics); //copy previous frame's graphics
UpdatePoints(); //update the path of the CustomWave
UpdateColor(); //update the color of the CustomWave
master.fireRenderCannon(); //redraw objects registered to master
}
This seems to work in theory, but as far as I can tell lastMaster ends up with no visible graphics content even though master renders as expected. I've tried several times to test whether this is the case, and am pretty convinced that that it is, but am newish to AS3 and am concerned I am overlooking something - the code looks like it should work. Does anyone have suggestions on how to test this properly? Are there obvious defects within this code that would cause lastMaster to be visually blank? Is there an better way of accomplishing my goal?
I think I'm in over my head on this... I would love any input. Thanks!
After you copied graphics, what do you try to do with it?
Method copyFrom works as clocks, without any problems. Isn't here logic bug in your code?
function perFrame(event:Event):void{
time = 0.001 * getTimer();
lastMaster.graphics.copyFrom(master.graphics); //Here
//master.graphics.copyFrom(lastMaster.graphics);
UpdatePoints();
UpdateColor();
master.fireRenderCannon();
}
Example of copyFrom, it works fine with any complexity of graphics:
var complex: Shape = new Shape();
adobeExample(complex.graphics);
var test2: Shape = new Shape();
test2.graphics.copyFrom(complex.graphics);
addChild(test2);
private function adobeExample(graphics: Graphics):void{
// define the line style
graphics.lineStyle(2,0x000000);
// define the fill
graphics.beginFill(0x666699);//set the color
// establish a new Vector object for the commands parameter
var star_commands:Vector.<int> = new Vector.<int>();
// use the Vector array push() method to add moveTo() and lineTo() values
// 1 moveTo command followed by 3 lineTo commands
star_commands.push(1,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2);
// establish a new Vector object for the data parameter
var star_coord:Vector.<Number> = new Vector.<Number>();
// use the Vector array push() method to add a set of coordinate pairs
star_coord.push(0,0, 75,50, 100,0, 125,50, 200,0, 150,75, 200,100, 150,125, 200,200, 125,150, 100,200, 75,150, 0,200, 50,125, 0,100, 50,75, 0,0);
graphics.drawPath(star_commands, star_coord);
}
After the comments made by Bennet and Nicolas, it became obvious that my requirements were (nearly) impossible without a fair amount of redesign. The changes made are as follows:
Generators are no longer DisplayObjects. They are only used to calculate vectors containing the IGraphicsData objects necessary to draw the generated graphic with the drawGraphicsData method.
MasterContainer is now a shape subclass that retrieves the Vector.<IGraphicsData> from each registered generator in order to draw the output.
A bitmap subclass is used to render the contents of the MasterContainer, combining it with a color-dampened version of the previous frame.
An abridged version of the bitmap subclass:
private var constantSustain:Number;
private var linearSustain:Number;
private var sustain:ColorTransform;
private var lastFrame:BitmapData;
public function BitmapManipulator(constantSustain:Number = 0.998, linearSustain:Number = 0.98) {
this.constantSustain = Math.min(Math.max(constantSustain, 0), 1);
this.linearSustain = Math.min(Math.max(linearSustain, 0), 1);
this.UpdateSustain();
this.addEventListener(Event.ADDED_TO_STAGE, OnAddedToStage)
}
private function UpdateSustain():void {
var constantRelease:Number = 255 * (this.constantSustain - 1);
this.sustain = new ColorTransform(this.linearSustain, this.linearSustain, this.linearSustain, 1,
constantRelease, constantRelease, constantRelease, 0);
}
private function OnAddedToStage(event:Event) {
this.lastFrame = new BitmapData(stage.stageWidth, stage.stageHeight, true, 0);
}
public function DrawFrame(container:MasterContainer):void {
this.lastFrame.draw(container);
this.bitmapData = lastFrame;
this.lastFrame = this.bitmapData
this.lastFrame.colorTransform(getBounds(this), this.sustain);
}
...and finally the results #60fps when using an indigo sine wave of shifting phase as the input for the CustomWave:

How can I move bones of a loaded asset programmatically in Away3D?

I'm loading a 3D asset into a Away3D scene and I'd like to move the position of the bones in code.
The asset loading all goes well, I grab a pointer to the Mesh and Skeleton while loading:
private function onAssetComplete(evt:AssetEvent):void
{
if(evt.asset.assetType == AssetType.SKELETON){
_skeleton = evt.asset as Skeleton;
} else if (evt.asset.assetType == AssetType.MESH) {
_mesh = evt.asset as Mesh;
}
}
After the asset(s) have finished loading, I have a valid Skeleton and Mesh instance, the model is also visible in my scene. The next thing I tried is the following.
// create a matrix with the desired joint (bone) position
var pos:Matrix3D = new Matrix3D();
pos.position = new Vector3D(60, 0, 0);
pos.invert();
// get the joint I'd like to modifiy. The bone is named "left"
var joint:SkeletonJoint = _skeleton.jointFromName("left");
// assign joint position
joint.inverseBindPose = pos.rawData;
This code runs without error, but the new position isn't being applied to the visible geometry, eg. the position of the bone doesn't change at all.
Is there an additional step I'm missing here? Do I have to re-assign the skeleton to the Mesh somehow? Or do I have to explicitly tell the mesh that the bone positions have changed?
This might not be the best way to solve this, but here's what I figured out:
Away3D only applies joint transformations to the geometry when an animation is present. In order to apply your transforms, your geometry must have an animation or you'll have to create an animation in code. Here's how you do that (preferably in your LoaderEvent.RESOURCE_COMPLETE handler method:
// create a new pose for the skeleton
var rootPose:SkeletonPose = new SkeletonPose();
// add all the joints to the pose
// the _skeleton member is being assigned during the loading phase where you
// look for AssetType.SKELETON inside a AssetEvent.ASSET_COMPLETE listener
for each(var joint:SkeletonJoint in _skeleton.joints){
var m:Matrix3D = new Matrix3D(joint.inverseBindPose);
m.invert();
var p:JointPose = new JointPose();
p.translation = m.transformVector(p.translation);
p.orientation.fromMatrix(m);
rootPose.jointPoses.push(p);
}
// create idle animation clip by adding the root pose twice
var clip:SkeletonClipNode = new SkeletonClipNode();
clip.addFrame(rootPose, 1000);
clip.addFrame(rootPose, 1000);
clip.name = "idle";
// build animation set
var animSet:SkeletonAnimationSet = new SkeletonAnimationSet(3);
animSet.addAnimation(clip);
// setup animator with set and skeleton
var animator:SkeletonAnimator = new SkeletonAnimator(animSet, _skeleton);
// assign the newly created animator to your Mesh.
// This example assumes that you grabbed the pointer to _myMesh during the
// asset loading stage (by looking for AssetType.MESH)
_myMesh.animator = animator;
// run the animation
animator.play("idle");
// it's best to keep a member that points to your pose for
// further modification
_myPose = rootPose;
After that initialization step, you can modify your joint poses dynamically (you alter the position by modifying the translation property and the rotation by altering the orientation property). Example:
_myPose.jointPoses[2].translation.x = 100;
If you don't know the indices of your joints and rather address bones by name, this should work:
var jointIndex:int = _skeleton.jointIndexFromName("myBoneName");
_myPose.jointPoses[jointIndex].translation.y = 10;
If you use the name-lookup frequently (say every frame) and you have a lot of bones in your model, it's advisable to build a Dictionary where you can look up bone indices by name. The reason for this is that the implementation of jointIndexFromName performs a linear search through all joints which is wasteful if you do this multiple times.

Get BitmapData from a displayObject included transparent area, and effect area

I have this function:
public static function cloneDpObj(target:DisplayObject):Bitmap
{
var duplicate:Bitmap;
var tBitData:BitmapData = new BitmapData(target.width, target.height);
tBitData.draw(target);
duplicate = new Bitmap(tBitData);
return duplicate;
}
to clone target displayObject (MovieClip or Sprite) and return Bitmap Object.
It can get bitmap from the target object, but it seem don't get all the area of the image.
By give the width and height of target object, but the target object in design was applied by Glow Effect, so my question can we get the all view of bitmapdata from a displayobject?
BitmapData.draw() takes a snapshot of a given object removing all transformations and filters applied on the stage. Resulting image shows object as it is present in your movie library.
There are two basic options when drawing display objects with transformations and/or filters.
You can apply all transformations during drawing with matrix parameter for BitmapData.draw(). After drawing you can apply filters to resulting bitmap with BitmapData.applyFilter().
Just draw parent container, not the object itself.
I usually choose the latter. That's pretty straightforward. There are some disadvantages: if you choose the second method, your target has to have a display list parent and you may draw unwanted content that resides in parent container. (However, these drawbacks are easily eliminated.)
// bounds and size of parent in its own coordinate space
var rect:Rectangle = target.parent.getBounds(target.parent);
var bmp:BitmapData = new BitmapData(rect.width, rect.height, true, 0);
// offset for drawing
var matrix:Matrix = new Matrix();
matrix.translate(-rect.x, -rect.y);
// Note: we are drawing parent object, not target itself:
// this allows to save all transformations and filters of target
bmp.draw(target.parent, matrix);
You need compute the area/rectangle of your DisplayObject including the area taken by the filter applied. Luckily you can do that with with built-in functionality by using the generateFilterRect() method of the BitmapData class.
Also, for other reasons, if you need the transformation of your DisplayObject applied to the BitmapData snapshot, you can pass the source DisplayObject's .transform.concatenatedMatrix as the second parameter of BitmapData's draw() method.
Thank you very much to all of you that take valuable time answer my question. I improved that function, but I is better, but I notice that the width of result of capture is 1pixel offset, so I decided to add 1 pixel to width of the bitmapdata, I know that is not a good practice. because I have to do that now, I don't know the issue yet. Here is how our function now:
public static function cloneDpObj(target:DisplayObject, optWidth:Number = -1, optHeight:Number = -1):Bitmap
{
var duplicate:Bitmap;
if (!target.parent) {
var tempSprite:Sprite = new Sprite;
tempSprite.addChild(target);
}
var rect:Rectangle = target.parent.getBounds(target.parent);
var bmp:BitmapData = new BitmapData(rect.width + 1, rect.height, true, 0);
// offset for drawing
var matrix:Matrix = new Matrix();
matrix.translate( -rect.x, -rect.y);
// Note: we are drawing parent object, not target itself:
// this allows to save all transformations and filters of target
bmp.draw(target.parent, matrix);
duplicate = new Bitmap(bmp);
return duplicate;
}
I would actually go with Nox's first option as the easier approach, and modifying your function to do it should only take one extra line of code:
public static function cloneDpObj(target:DisplayObject):Bitmap
{
var duplicate:Bitmap;
var tBitData:BitmapData = new BitmapData(target.width, target.height);
tBitData.draw(target);
duplicate = new Bitmap(tBitData);
//add the filters
duplicate.filters = target.filters;
return duplicate;
}