Does Createjs have any support for trimming sprites with texturepacker ( removing the alpha pixels in the actual sheet) but displaying the sprite with the alpha in game.
If it does not support it does anyone have any suggestions on adding this or how to go about adding it.
Thanks!
TexturePacker comes with an exporter for CreateJS/EaselJS. It supports trimming.
CreateJS receives the sprite with the trimmed size but the registration point is adjusted to compensate for this.
Is it not working for you? What is happening?
Related
I'll start with the pictures:
Comparison Of Different Publishing Methods From Flash CC
It seems like there is a huge difference between what's published by through Flash CC HTML5 with CreateJS and what's actually created on the program although they are exact copies (I'm not talking about the pose of the character)
The shapes making up the body parts are all triangles with a solid fill and no stroke.
However, in the HTML5 published versions it looks like all those shapes now have a thin transparent stroke around them in between each other.
Any explanation or official support is greatly appreciated!
UPDATE:
The accepted answer definitely improved some of the problem but unfortunately not enough.
Since it's a platform limitation, I decided to work around it by doubling up all the assets of every layer and minutely overlapping them as best as I can.
Here's a link of the work around being implemented if you wanted an update:
link
This is an unfortunate issue with Canvas. The SWF format actually draws lines with fills on both sides, which enables the SWF (and Flash/Animate IDE) to create seamless edges when drawing shapes with edges that line up. Canvas can not do that, so the antialiasing causes the effect you are seeing.
A possible approach would be to cache it at a larger size, and scale it down.
var bounds = character.nominalBounds; // Added by Flash export
character.cache(bounds.x, bounds.y, bounds.width, bounds.height, 2);
The last parameter is the cache scale factor (in this case it doubles the cache size). It will still draw at the expected scale though.
I made a quick sample to show the difference, and it does help. Note that caching is also a good way to get rid of aliasing on edges. You can download the sample here. Uses Adobe Animate 2016.
Plain shapes exported from Adobe Animate
Cached the shape container
Doubled the cache size
You also might want to consider dropping in a shape behind it that is closer to the color of the shapes, so if the edges show through, it is not the dark grey background.
My question is if I can add eventListeners to the pixels I copied with the instance.copyPixels... If I perhaps copy my character from bitmap I have loaded. Can I make him walk?
You would have to draw the moving parts into different Sprites and then move those arround.
This is the wrong approach though.
Walking animations for example are usualy done with a SpriteSheet and Blitting or BitmapData Frame assignment.
1.) I want to animate images in Cocos2d-x V2.2.3 without using spritesheet.
I
2.) Or please provide me the url of tool which can make spritesheet free of cost. I have used texturepacker and its trial has expired now :(
Spritesheets are really the way to go. TexturePacker is well worth the investment. Seriously.
If you dont want to use one, then your addFrameWithFileName() is incorrect now.
Just make normal Sprite out of each of those calls. There are other ways too.
Edit: Here is documentation: http://www.cocos2d-x.org/wiki/Sprite_Sheet_Animation
I am trying to use LibGDX's texture packer gui for making a texture atlas of tiles for a video game. But I keep getting alpha bleed and I am wondering how to prevent that from happening? I have tried all the different filters and the only one which works was the Nearest filter but I need MipMaps so this would not work from a performance point of view. So is there a way to get rid of the alpha bleed with MipMaps?
I am using the 3.2.0 version of texture packer.
Here are images of what is happening with text explaining what is going on in each image.
I solved it. In TexturePacker make sure you have PaddingX and PaddingY set to 2 or higher and put a check mark on the Duplicate padding. This will tell TexturePacker to duplicate the pixels on the edge which will get rid of the sprite/alpha bleed.
I've been searching for answer for about 2 hours now and I haven't found my desired answer. My question is, Is it possible, and how, to draw a circle-shaped texture, so that outside the circle, texture would be transparent, is it even possible?
Thanks in advance! This site has been a great help so far!
The easiest way is to open a program like Photoshop and make an image with an alpha-channel. That means: Start with a completely transparent image and draw a circle on it. Then save it as .png
You can then just load it in your game and render it using a SpriteBatch. It (or better your graphics card) knows how to handle the alphachannel and will keep everything but the circle completely invisible.
This way you do not have to manipulate any pixmaps at runtime and you are not limited to simple shapes like circles.
If the portion of the texture you want to see in the circle is not meant to change during execution, the easiest way is to open Photoshop, make what you want, export it as an image and then load it in a Texture or a Sprite object in your code.
But this can also be done at runtime, via OpenGL using a Stencil test. This is the only solution if the portion displayed in the circle will have to be alterable during execution.
pixmap use this link if u are using other than .png format for your images
Apart form it if you are using png images then just draw the cirlce. Outside the circle will remain transparent.