algorithmic Zoom calculation for canvas and render about examples

[ivanpopelyshev]

I'm using pivot to change it.

The idea is to remember coordinates of certain point on screen, and then restore them.

class myCamera extends PIXI.Container { 
        constructor { 
               super();
               memCoord = new PIXI.Point();
 	       memCoord2 = new PIXI.Point();
        }

	public pushPivot(pos) {
		this.toLocal(pos, null, this.memCoord);
	}

	public popPivot(pos) {
		this.toLocal(pos, null, this.memCoord2);
		this.pivotTarget.x -= this.memCoord2.x - this.memCoord.x;
		this.pivotTarget.y -= this.memCoord2.y - this.memCoord.y;
	}
}

//declare scale somewhere. you can do it in camera too.
var scale = 1.0;
...
//zoom in
const mousePos = renderer.interaction.mouse.global;
stage.camera.pushPivot(mousePos);

scale *= 1.1;
camera.scale.set(scale);

stage.camera.popPivot(mousePos);

[ivanpopelyshev]

Lets see.

https://github.com/pixijs/pixi.js/blob/dev/src/core/display/DisplayObject.js#L102 - we assume that _bounds and _boundsRect are calculated after getBounds() . You can getBounds() on root object and thus calcualte all bounds of all objects inside.

Rectangle has contains method: https://github.com/pixijs/pixi.js/blob/dev/src/core/math/shapes/Rectangle.js#L139

Bounds have no methods for it: https://github.com/pixijs/pixi.js/blob/dev/src/core/display/Bounds.js

If you need a new geometry method, you can just add it inside Rectangle/Bounds

PIXI.Rectangle.prototype.checkInObj = function(x, y) { ... }

Its up to user to add methods they need to pixi math objects.

[ivanpopelyshev]

Its normal.

You are supposed to change calculateBounds logic, not mess with cached _boundsRect.

[jonlepage]

I understand your approach a bit.
the problem is that also my camera can be constantly update moving with a system of easing.

    const editorTiker = new PIXI.ticker.Ticker().add((delta) => {
        document.title = `(mX: ${mX})  (mY: ${mY}) | (dX: ${~~dX}) (dY: ${~~dY})`;
        if(scrollAllowed){
            let scrolled = false;
            (mX<20 && (dX-=scrollF) || mX>sceneX-20 && (dX+=scrollF)) && (scrolled=true);
            (mY<20 && (dY-=scrollF) || mY>sceneY-20 && (dY+=scrollF)) && (scrolled=true);
            scrolled && (scrollF+=0.01) || (scrollF=0.01) ;
        }
        $gameMap._displayX += ((dX-$gameMap._displayX)/scrollSpeed);
        $gameMap._displayY += ((dY-$gameMap._displayY)/scrollSpeed);
    });

my code are based on this jsfiddle, but i apply the formula only if mouse are on limit of screen for start move.
When am zooming + scrolling This creates a real psychedelic brothel!
http://jsfiddle.net/loktar/RE7Ac/?utm_source=website&utm_medium=embed&utm_campaign=RE7Ac

[ivanpopelyshev]

This thing also works with easing :)

I dont see scaling in the demo.

[jonlepage]

!! thank a lot, it work very well, you save me a hell of a headache.
it remains for me to put it clean.

    memCoord = new PIXI.Point();
    memCoord2 = new PIXI.Point();
    function pushPivot(pos) {
		SM_S._spriteset._tilemap.toLocal(pos, null, memCoord);
    }
    function popPivot(pos) {
        SM_S._spriteset._tilemap.toLocal(pos, null, memCoord2);
        SM_S._spriteset._tilemap.pivot.x -= memCoord2.x - memCoord.x;
        SM_S._spriteset._tilemap.pivot.y -= memCoord2.y - memCoord.y;
	}
    function wheel_(event) {//TODO: zoom system
        setMouseXY();
        const mousePos = new PIXI.Point(mX,mY);
        pushPivot(mousePos);
        if(event.wheelDeltaY>0){
            mapZoom.x+=0.1
            mapZoom.y+=0.1
        }else{
           mapZoom.x-=0.1;
           mapZoom.y-=0.1;
        }
        popPivot(mousePos);
    };

[jonlepage]

@ivanpopelyshev
I still need your knowledge on pixi again:).
is there a simple way to calculate if a pixi point is in a bound?
I would like to re-write all the codes that call for the internal detection of an element.

for now i use something like this, but I find it difficult to read and especially to decompose or copy past.

      function checkInObj(x=mX, y=mY, event){
            const {x:X,y:Y,width:W,height:H} = cage._boundsRect;
            if(x>X && x<X+(W/1.4) && y>Y && y<Y+(H/1.4)){
//... mouse are inside this element .. do stuff

If i store mouse in a PIXI.Point(), and all objects already have her bounds.
Is there a method in pixi for return true or false, if the pixi point is inside the collision:?
Or what the must easy and fast way your use for detect if a coor x,y are in a object bound ?
thank

[jonlepage]

ok thank , i will check more about Rectangle.prototype.contains.
It look like what a need.

[jonlepage]

@ivanpopelyshev
i also see i can reduce or enlarge the zone with Rectangle.
I suppose if i need to reduce the bound by 25% for more centered detection
i can do this

sprite.getBounds();
sprite._boundsRect.pad(-sprite.width*0.25,-sprite.height*0.25);

[ivanpopelyshev]

i think you need to override sprite calculatebounds, that'll be better. It uses calculateTrimmedVertices and maybe you can override that method to use extra sprite fields.

[jonlepage]

@ivanpopelyshev
well it work good but a notice a bug , or tell me if is not !
example add object to my map.

sprite.getBounds();
sprite._boundsRect.x+=(dX*48); // need because i use zoom and map scroll
sprite._boundsRect.y=(dY*48);  // dY,dY it the position of pivot from map parent scroll

console log=>
sprite._boundsRect. {x: 2914.62,..} // ok this it good

---

But if after i inject a filter for make FX when mouse hover a objects sprites.
I don't understand why _boundsRect are Re-calculated ???
Logically this must be done manually, but by adding a filter, it seems to force it to be compute again.

So example after, i do this
sprite.filters = [new PIXI.filters.OutlineFilter(3, 0x000000)]
and now console.log the sprite !and surprise???
sprite._boundsRect. {x: 810.62,..} // that not good , why it recalculate ?
I am not a fan of rewriting pixi source code because in case of update it quickly becomes complex to manage.

i try without inject filter for see if i made a mistake somewhere, but the filter injection that seem to recalculate the bounds!
it normal ??
thank

[ivanpopelyshev]

For example, that's how its done in Sprite: https://github.com/pixijs/pixi.js/blob/dev/src/core/sprites/Sprite.js#L327

If you use pixi-heaven for sprites, you can just extend heaven sprite and make better calculation for bounds, based on extra fields you add in sprite.

Its ok to change Sprite logic (better to extend!) , its what you supposed to do according to pixi architecture.

[jonlepage]

ok thank i will do

[jonlepage]

ok, I understand a little better my problem.
The parent who is the Map uses pivot to be moved and not x and y.
the getBound dont take the parent pivot.
Without touching pixi, I wonder if using position x, y will not solve my problem globally.

Spriteset_Map.prototype.updateTilemap = function() {
    /*this._tilemap.pivot.set(
        $gameMap.displayX() * $gameMap.tileWidth(),
        $gameMap.displayY() * $gameMap.tileHeight() 
    );*/
    this._tilemap.position.set( // use position instead of pivot
        -($gameMap.displayX() * $gameMap.tileWidth()),
        -($gameMap.displayY() * $gameMap.tileHeight()) 
    );
};

I wonder if there was a logical reason to use the pivot for move the map of a game.|
if I use the position instead, in theory I should not have to change how the bounds is calculated.
What do you think, there is a logical reason to use pivot rather than the position for the parent map.
I use pivot because RMMV used origin (pivot) for move the scroll map !

[ivanpopelyshev]

Both position and pivot affect bounds the same way.

[jonlepage]

yep i just notice, i will rewrite the calculateBounds thank for all you hyelp 👍

[jonlepage]

@ivanpopelyshev ho hey :) solved
this saves me from modifying pixi
When add obj to map, one time register bounds to _boundsMap

      sprite._boundsMap = sprite.getBounds().clone();//register a bounds
        sprite._boundsMap.x+=(dX*48)
        sprite._boundsMap.y+=(dY*48);

Event check if mouse are in

            if(obj._boundsMap.contains(mX,mY)){
              obj._filters = [$PME.filters[0]]; // add a registered filter from cache
            }else{
               obj._filters = [];
            }
        }