Git Product home page Git Product logo

Comments (11)

GoodBoyDigital avatar GoodBoyDigital commented on March 29, 2024

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.

englercj avatar englercj commented on March 29, 2024

Yes the same issues exist with the canvas renderer. I've been working non stop on the rewrite 😄

from pixijs.

GoodBoyDigital avatar GoodBoyDigital commented on March 29, 2024

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.

englercj avatar englercj commented on March 29, 2024

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.

GoodBoyDigital avatar GoodBoyDigital commented on March 29, 2024

Nice! Good to know, will have to look into adding that into the renderers!

from pixijs.

namuol avatar namuol commented on March 29, 2024

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.

jdarling avatar jdarling commented on March 29, 2024

@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.

englercj avatar englercj commented on March 29, 2024

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.

englercj avatar englercj commented on March 29, 2024

Added PR #167 to fix this issue.

from pixijs.

englercj avatar englercj commented on March 29, 2024

landed

from pixijs.

lock avatar lock commented on March 29, 2024

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)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.