Comments (11)
good point,
how does it look with the canvas renderer? do the same scaling issues exist?
looks like you have made some great progress on the tile engine BTW!
from pixijs.
Yes the same issues exist with the canvas renderer. I've been working non stop on the rewrite 😄
from pixijs.
Cool, do you know if there is an option for canvas to allow similar nearest scaling? Really keen on keeping the two renderers consistant..
from pixijs.
Yessir, the basic idea is to do:
ctx.imageSmoothingEnabled = false;
ctx.mozImageSmoothingEnabled = false;
ctx.webkitImageSmoothingEnabled = false;
Where true
is linear and false
is nearest.
You can read more on the StackOverflow Question.
from pixijs.
Nice! Good to know, will have to look into adding that into the renderers!
from pixijs.
I've also done research on this topic with regards to various browsers: http://stackoverflow.com/questions/7615009/disable-interpolation-when-scaling-a-canvas
If you want to "zoom" with nearest filtering and you want true cross-browser compatibility, you'll need to have a special implementation for browsers that don't support imageSmoothingEnabled
-- my engine basically does what ImpactJS does: scale all textures manually with a nearest-neighbor algorithm in JS, and then clamp sprite positions to the nearest Nth pixel.
This works great for when you aren't rotating or scaling individual sprites, but will look "incorrect" or "fake" otherwise, so I would recommend only using this as a last-resort when the browser doesn't support imageSmoothingEnabled
.
Here's code to detect if imageSmoothingEnabled
is available:
var imgSmoothingEnabled = function() {
var canvas, ctx;
canvas = document.createElement('canvas');
ctx = canvas.getContext('2d');
return ctx.imageSmoothingEnabled != null ||
ctx.webkitImageSmoothingEnabled != null ||
ctx.mozImageSmoothingEnabled != null ||
ctx.oImageSmoothingEnabled != null;
};
from pixijs.
@englercj any chance of you sharing some of that code on how to do tilemaps? I've just started looking at Pixi and this is one of my first requirements is a basic tilemap that I can generate randomly. I have code to build out random tilemaps based on perlin noise and something like: http://www.saltgames.com/2010/a-bitwise-method-for-applying-tilemaps/
Now I just need to take the output and link it to a proper display. I have looked at creating it myself, but for the life of me I can't figure out how to with the exception that I need to start with DisplayObjectContainer and DisplayObjects. Since I can't find where the render actually happens I am not sure what to overload to get the tiles (sprites) displayed.
from pixijs.
Grapefruit is 100% open source, you can find it here: https://github.com/grapefruitjs/grapefruit
The code for Tile maps imported from the Tiled Editor can be found here: https://github.com/grapefruitjs/grapefruit/blob/master/src/map/tiled/TiledLayer.js
hope this helps.
@GoodBoyDigital Any update on custom filters for textures to fix this issue?
from pixijs.
Added PR #167 to fix this issue.
from pixijs.
landed
from pixijs.
This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
from pixijs.
Related Issues (20)
- Bug: TilingSprite does throw error when rendering in Node.js HOT 2
- Feature Request v8: Custom build instructions set for Graphics HOT 3
- Bug: Facebook Sdk Initialization Error HOT 22
- Bug: cannot use WebGPU in Worker in Arc browser HOT 6
- Bug: v8.0.0-rc.3 Graphics.regularPoly() stroke not closed HOT 1
- Bug: v8.0.0-rc.3 TypeError on Graphics.destroy() after Graphics.clear() HOT 1
- Bug: Graphics with svg gradient not working
- Bug: Resolver ignores `resolution` of asset in v8? HOT 5
- Bug: Shader alpha not working
- Bug: Api documentation link shows access denied
- Bug: Uncaught TypeError: Cannot read properties of undefined (reading 'canvas') HOT 8
- Bug: v8.0.0-rc.4 Culler does not work? HOT 1
- Bug: v8.0.0-rc4 Texture.update() missing? HOT 3
- Bug: Moving a DisplayObject to a different Container prevents the mouseout event from working reliably
- Bug: Incorrect calculation of vTextureCoord when scaling parent container HOT 1
- Bug: pointerover/pointerout fire twice when eventMode HOT 9
- Bug: BitmapText multiline and missing characters
- Bug: v8.0.0-rc.5 Culled containers are culled forever HOT 4
- Bug: Pixi 8 build with vite get warning and pixi crashes when minify is turned on HOT 2
- Bug: 8.0.0-rc.5 no longer renders sprites on Firefox HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from pixijs.