Using EaselJS (HTML Canvas framework, from CreateJS)
I have a tileset, and I need to draw a tilemap.
So I assigned my tileset bitmap to each tile.
But of course, each tile has to draw only a part of the tileset.
I figured out how to draw a part of a Bitmap (Bitmap.sourceRect), but it means I have to clone the tileset for each tile !
Coming from a Flash AS3 background, I chose this library because it is supposed to be similar, however it seems to be different for image handling (where this problem is adressed by using many Bitmap with one BitmapData).
Thanks.
Look into using a SpriteSheet and BitmapAnimation instead. There are examples in GitHub that can help.
https://github.com/CreateJS/EaselJS/blob/master/examples/SpriteSheet.html
http://www.createjs.com/#!/EaselJS/demos/spritesheet
Related
how can I save a dom as svg file using html2canvas ?
For downlading as png , I've done something like below :
html2canvas(document.querySelector('#demo')).then(function(canvas) {
saveAs(canvas.toDataURL(), 'image.png');
});
How can I achieve similar result to save it as svg file ?
You don't.
The reason you can export to png/jpg/etc is that the canvas is a pixel graphic presentation layer, so for convenience it knows how to generate the browser-supported image types that use embedded bitmaps.
If you want vector graphics instead, then you'll need to actually draw vectors, and that means not relying on the canvas APIs. You either roll your own vector drawing instruction set (directly generating SVG yourself, or rasterizing objects to the canvas purely as presentation layer), which I would recommend against, or you use one of several vector graphics packages already out there like Paper.js, Three.js, Rafael, and so forth.
Is it possible to render svg from pixie composition?
I'm working on a project where I'll draw generative graphics and then I'll have to have them in some vector format because this will go to print.
I would be happy to get svg or some other vector format.
The reason I'm doing this with pixie is that I will later use that compositions as animations on a company website.
Well, you can draw and render SVG data using the pixi-svg-graphics module, but I am pretty sure that you can't export any vector format. That's because pixi.js uses rasterized textures internally, not vector data.
That's not gonna happen pixi is raster based, even above plugin as noted above will only draw vectors on top of raster images.
If you want I can redraw any raster images into vector images, it's not that much work :P
I can create a transparent image with several images using gimp and use http://www.spritecow.com/ to get the image coordinates for sprite.
what is the best way to create svg sprite ? I have several svgs - and I would like to create a single svg sprite image and then get the coordinate to create the individual classes.
I am on windows machines - so I am hoping for a online solution.
thanks
may I suggest that you look at icomoon.com/app. The service is very similar to your spritecow.
The better part is you take individual svg and upload it - and then download the sprite.
I'm building a game in HTML5. I have hundreds of images that look similar to this:
And at certain points in the game I want to draw an outline around them. Like this:
I want to do different tracing colors at different times and don't want to end up with [number of sprites] * [number of colors] of additional images for memory and bandwidth reasons so I'm looking at vector drawings.
What I need to come to a solution on are really two separate things:
Calculate a vector path for each frame in a spritesheet. This can be either dynamically or ahead of time and stored.
Draw the vector path
The engine I'm using for the game is ImpactJS. It doesn't have any support for vector operations. The author of the game engine I'm using did his own vector drawing manually by exporting the vectors from Illustrator for a particular image, then using an online converter tool to change them to HTML5 syntax. This isn't the best method for hundreds of images so I thought I'd see what information others of you have.
I would like to still draw the images using ImpactJS since this game is already pretty far along, and just do a second-pass drawing of the outline of the image when necessary.
Thank you for any help!
I'm actually trying to include a .jpg image into my 3D scene. All solutions i have found consisted in apply those images on meshes as texture : but then the scene does not look like well. Indeed, we can see the mesh border whether it be a plane or sphere... I just want to see the image. Does exist it another solution ?
On my application, i want to rotate an airplane around the earth, and the problem is about including this airplane.
Thanks for your help :)
Perhaps the class THREE.Sprite will accomplish the effect you want. THREE.Sprite can display an image, and can use either screen coordinates (e.g. canvas coordinates) or it can be part of your 3D scene, but a sprite image is always facing the camera. If you want the image to rotate, you do need to use it as a texture on a mesh. Whatever you decide to do in the end, I've posted a bunch of tutorial-style examples at http://stemkoski.github.io/Three.js/ that may help. Good luck!