Jump to content

Gaps between sprite tiles when scaling the stage


Recommended Posts

I work on a simple game prototype which uses the tilemap 

I have a scene which extends PIXI.Container and has a map made out of individual pats of a texture atlas. 

At the end I have simple piece of code for zooming my scene by mousewheel, when I scale the scene the tiles sprites will have a small gap between them or they may overlay each other at certain points.

I tried to solve my problem the following ways:

1)  I've tried to use this settings 


2)  I've tried to set up my canvas like this:

canvas {
    image-rendering: pixelated;

3) I've tried to set up antialias property to true and vice versa 
4) I've tried to use Math.round to the position of each tile as well as to the position of whole scene 
5) I've tried to set up cacheAsBitmap = true to the whole scene 
6) I've try to use pixi-tilemap from there https://github.com/pixijs/pixi-tilemap, I made there small changes in the basic example, but I've got the same result   

Nothing was helpful 

This is my code which I use for zooming:

var self = stage;
rendererviewaddEventListener('mousewheel'function(event) {
    var factor   = delta = eventwheelDelta || -eventdetailpoint = new PIXIPoint(eventpageX / 1 eventpageY /1);
    // на сколько минимально можно отдалить объект
    var MIN_SCALE = 0.25;
    // максимально можно приблизить объект
    var MAX_SCALE = 1;
    var local_pt = selftoLocal(point);
    var curScale = selfscaley;
    if ( delta > 0) {
        // Zoom in
        factor = 0.1;
    } else{
        // Zoom out
        factor = -0.1;
    if(factor > 0 && curScale >= MAX_SCALE) {
    } else if(factor < 0 && curScale <= MIN_SCALE) {
    } else {
        var parentLocal = point;
        selfpivotx = Mathround(local_ptx);
        selfpivoty = Mathround(local_pty);
        selfpositionx = Mathround(parentLocalx);
        selfpositiony = Mathround(parentLocaly);
        selfscaleset(selfscalex + factor);

Does anyone know how to solve it?


Screen Shot 2016-12-30 at 11.43.26 PM.png

Link to comment
Share on other sites

This happens because the pixels at the edges get blended with outer transparent pixels. If you are using TexturePacker to create your atlas, "extrude" option will help you. 

Usually, that is enough to get rid of the gaps. You are using WebGL renderer, right?

Link to comment
Share on other sites

I am sorry that I didn't explain it in more detail: 

1) I use WebGL because I need to use some shaders for my demo, so WebGL is a crucial for my demo 

2) I've solved the problem with the tiles by using roundPixels set to true and TexturePacker with "extrude" option

That was a good part =), but:

I have lets say asteroid field in my demo and each asteroid have a random animation like this: 

public update() {
    this.asteroid.rotation += 0.0005;

and I am calling that "update" each frame 

As you can see the precision of the rotation is very high and I have some kind of distortion when I rotate asteroid with that precision and that is the problem for me now. 


Thank you and I'll appreciate any help.


Link to comment
Share on other sites

Using mipmapping on repeating textures in GL is the cause of those seams, that's why it only shows up when you scale. The explanation is here, scroll down to "Mipmapping Texture Atlases". It can be covered up with tricks like that "extrude" option, but the only way to fix it completely is to turn off hardware mipmapping.

Link to comment
Share on other sites

5 hours ago, merachefet said:

but the only way to fix it completely is to turn off hardware mipmapping.

Well without mipmapping it will be pixelated at lower scales.

Actually extrusion does solve it completely as far as I know, do you know a scenario where it does not? 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...