Help - Some clarifications about DisplayObject.toLocal and how it will fit my game logic

neonwarge04 · December 6, 2015

I am a little bit struggling here. I was tasked to create an infinite platformer. Its just a jumpy jumpy toon and its world structure is tile based. Imagine a flappybird that goes upward instead of sidewards. Anyway, the map isn't procedurally generated. I already have the 2d array data to represent the map. Very simple, just game prog 101 stuff there. Now, I went on different approach on having one and did (and will never) consider a third party just to do this. (Please do not suggest third party libs/solutions, as I have a very bad experiences with them. I want to stick on what PIXI.js have, I am already done dealing with TweenJS and a third party particle engine and I don't wish to add more unmaintained 3rd parties in this project). I already have the map panning correctly but the logical data that runs through the game doesn't fit the overall structure. I think I might run into some dead end if I continue this and it will be costly for me to reverse anything and get back to using Display Object Containers.

There is already an issue thread posted on github about this and I think one of your developers suggested this, to use 2 containers instead (one for the main view, and the other one is for panning, i just have to put all game related representations to the latter and move the y axis of the container) and did just that. Right, it works beautifully! I already have my map pans upward using this. Now here's the catch and this is the reason why I abandoned the idea of using it, since this will go infinitely, my toon go upward infinitely as well so its y coordinates become increasingly negative. Which is logical and reasonable by the way. This is bad for my collision detection sensors. I don't really have a brilliant collision detection right now but it works well so far but my sensor are highly dependent on the 2d grid for some reasons.

I get the pixel coordinates of toon and then divide it by the size of each tile to return to me the data of its current grid position. Now if its negative and after a couple of minutes of playtime, this will become a big number overshooting the size of the grid (e.g: x: 80, y:-15680)!

I checked the documentation looking for some way and found this for every display object: toLocal(position, from) and toGlobal(position, from). But I don't understand this, is this somehow similar to SFML's convertToLocal when dealing with sf::Views? Its like I clicked a sprite which is located at (x : -450, y: -450) but when I convert it to local, the converted coordinates gives the area of the sprite relative to screen. If I can make the toon's coordinate sit inside the bounds of gameplay area. That would be great! And that is my goal.

I would appreciate your guidance and assistance! Thank you!

neonwarge04 · December 6, 2015

I believe I can express myself better with code:

<!DOCTYPE html><html>    <head>        <title>Screen Panning Sample</title>        <script src="core/pixi.js"></script>    </head>    <body>        <script>                    var screenSize = {width : 800 , height : 600 };            var renderer = PIXI.autoDetectRenderer(screenSize.width, screenSize.height, {});            var sprite = null;                        var subStage = new PIXI.Container();            var stage = new PIXI.Container();            stage.addChild(subStage);                        new PIXI.loaders.Loader()                .add('res/textures/textures.json')                .once('complete' , function()                    {                        sprite = new PIXI.Sprite.fromFrame('0.png');                        sprite.anchor.x = 0.5;                        sprite.anchor.y = 0.5;                        sprite.position.x = screenSize.width / 2;                        sprite.position.y = screenSize.height / 2;                                        subStage.addChild(sprite);                        update();                    })                .load();                        function update()            {                renderer.render(stage);                subStage.position.y += 0.016667 * 20;                                console.log(sprite.toLocal(? , ?));                                requestAnimationFrame(update);            }                        document.body.appendChild(renderer.view);                    </script>    </body></html>

Here is what I am trying to do, I want to get the location of the sprite in the screen, not in the container it is contained to.

I don't know what to put on this two parameters here given my code, I am kinda confuse:

                console.log(sprite.toLocal(? , ?));

Hence, the question mark. I am sorry, but I find it vague from the docs, it said:

Name Type Description position PIXI.Point

The world origin to calculate from

from PIXI.DisplayObject optional

The DisplayObject to calculate the global position from

What I did on my case is to place the position excluding the optional param:

            function update()            {                renderer.render(stage);                subStage.position.y += 0.016667 * 20;                                console.log(sprite.toLocal(stage.position));                                requestAnimationFrame(update);            }

But this gives me negative coordinates for both and x and y axis. Although I think I can live with that, but am I taking this wrong?

Thank you!

neonwarge04 · December 6, 2015

I think I got it now!

I lack understanding between local vs global coordinates. I used global and it looks pretty well so far, and this is the data I exactly need for the game!

<!DOCTYPE html><html>    <head>        <title>Screen Panning Sample</title>        <script src="core/pixi.js"></script>    </head>    <body>        <script>                    var screenSize = {width : 800 , height : 600 };            var renderer = PIXI.autoDetectRenderer(screenSize.width, screenSize.height, {});            var sprite = null;                        var subStage = new PIXI.Container();            var stage = new PIXI.Container();            stage.addChild(subStage);                        new PIXI.loaders.Loader()                .add('res/textures/textures.json')                .once('complete' , function()                    {                        sprite = new PIXI.Sprite.fromFrame('0.png');                        sprite.anchor.x = 0.5;                        sprite.anchor.y = 0.5;                        sprite.position.x = screenSize.width / 2;                        sprite.position.y = screenSize.height / 2;                                        subStage.addChild(sprite);                        update();                    })                .load();                        function update()            {                renderer.render(stage);                subStage.position.y += 0.016667 * 20;                sprite.x += 0.016667 * 20;                                var glb = sprite.toGlobal(stage.position);                var act = sprite.position;                                console.log("global coords : " + glb.x + ' ' + glb.y);                console.log("actual coords : " + act.x + ' ' + act.y);                                requestAnimationFrame(update);            }                        document.body.appendChild(renderer.view);                    </script>    </body></html>

Thank you!!!

neonwarge04 · December 7, 2015

Oh no, I think I still got it wrong. I am frustrated, I wanted to get the coordinates of my sprite against the container I created, the one which doesn't pan upwards. toGlobal is returning me wrong values. Which, through in depth debugging, understood the reason for this. So I am the one whose wrong.

Here is what I need:

I have two containers (maincontainer for main view and for ui) second is (subcontainer) this is what I use to pan everything in the game. I inserted a sprite inside subcontainer and I move that container around, I still need to get the position of the sprite when I view it from maincontainer. Imagine the sprite is at (45,45), because I pan the subcontainer 45 pixels to right and 45 pixels downwards but inside subcontainer sprites coordinate is still 0x0. This is correct, but when I use the maincontainer as a reference it perceives the coordinate as 45x45.

Is there a way for me to do this? If so how?

Exca · December 7, 2015

You could ask the sprites global coordinates like this:

var point = new PIXI.Point(0,0);
point = sprite.toGlobal(point);

Now the point contains the position 0,0 (the middle of the sprite as your anchor is 0.5, 0.5) of the sprite but in global coordinates.

Then you can just offset the point to your maincontainers coordinates like this:

point.x += mainContainer.x;
point.y += mainContainer.y;

And then you have your sprites position in maincontainer coordinates (assuming the maincontainer is not scaled or rotated).

[Edit] Instead of adding maincontainers position you could also do
point = mainContainer.toLocal(point)

neonwarge04 · December 7, 2015

This is very helpful tips! Thank you!

But I kinda give up, this is hopeless, I can't get it to work. If pixi have something like that of SFML like mapping pixel to coordinate, I can simply treat my sprite like a mouse or something. I mean ideally, I don't have to handle sprite getting 'off the screen' this is stupid specially in games meant for mobile right? So I have to keep the coordinates of the sprite constant. I am force to use two containers instead and pan just the second one. Now I am having hard time making sure my toon's coordinate where jumping back and forth.

Here is what I am currently doing, maybe you can help me with this? I am animating the pan, so every time toon reaches a height of gridPosition.y >= 6, the entire world collapses and then pan upwards. As I pan upwards (which means I pull the second container downwards pulling everything on it downwards) this causing disruption to my collision detection. If only I could get the correct coordinates of the sprite in the visible screen, this could have been possible.

Here is the real mess I am dealing with:

Toon.js

define(['pixi' , 'core/utils/Keyboard', 'tween'], function(PIXI , Keyboard, TWEEN){  function Toon(world)  {    var mIsJumping  = false;    var mIsOnGround = true;    var mGlobalContainer = world.globalContainer;    var mContainer = world.container;    var mPanHeight = 6;    var mJumpSpeed = 640;    var mMoveSpeed = 250 ;    var mWorld     = world;    var mDirection = 1;    var mVelocity      = { x : mMoveSpeed , y : 0 };    var mGridPosition  = { x : 0 , y : 0 };    var mPosition      = { x : 0 , y : 0 };    var mSize          = { width : 40 , height : 40 };    var mLimit         = { x : 0 , y : 0 };    var mCurrentFloor = null;    var mGravity = 28.8;    var mIsDead = false;    var mWallStickEnabled = false;    var mIsWallSticking = false;    var mIsTouchingLeftMostWall = false;    var mIsTouchingRightMostWall = false;    var mIsPannable            = true;    var mHighestHeightAttained = 0;    var mCurrentBlocks = {};    var mCurrentLeftWall  = null;    var mCurrentRightWall = null;    var mCurrentFloor     = null;    var mCurrentRoof      = null;    var mJumpKey = Keyboard(32);    mJumpKey.press = function()      {        jump();      }    var mMovieClip = new PIXI.extras.MovieClip(this.mAnimFrames);    mMovieClip.animationSpeed = 0.3;    mMovieClip.anchor.x = 0.5;    mMovieClip.anchor.y = 0.5;    mMovieClip.play();    mMovieClip.x = mPosition.x;    mMovieClip.y = mPosition.y;    mMovieClip.play();    var This =        {            get position(){ return mMovieClip.position; }          , set position(position) { mMovieClip.position = position }          , get x(){ return mMovieClip.x; } , get y(){ return mMovieClip.y; }          , set x(x){ return mMovieClip.x = x; } , set y(y){ return mMovieClip.y = y; }          , get global()            {              var point = new PIXI.Point();              point = mMovieClip.toGlobal(point);              point.x += mGlobalContainer.x;              point.y += mGlobalContainer.y;              return point;            }          , get size(){ return mSize; }          , get width(){ return mSize.width; }          , get height(){ return mSize.height; }          , update : update          , jump   : jump          , get sprite() { return mMovieClip; }          , get highestHeightAttained(){ return mHighestHeightAttained; }        };    function update(elapsed)    {      TWEEN.update(elapsed);            if(mIsPannable)      {        if(!mIsWallSticking)          mVelocity.y += mGravity;        else          mVelocity.y = 60;        mMovieClip.x += (mVelocity.x * elapsed) * mDirection;        mMovieClip.y += mVelocity.y * elapsed;        mGridPosition.x = Math.floor(This.global.x / mWorld.blockSize);        mGridPosition.y = Math.floor(This.global.y / mWorld.blockSize);        // console.log("Grid position : " + mGridPosition.x + ' x ' + mGridPosition.y);        detectCollision();      }    }    function detectCollision()    {      (function detectFloorCollision()       {          mLimit.y = getMostRoof(mGridPosition , 1);          if((This.global.y + (mSize.height / 2)) >= mLimit.y)          {            mMovieClip.y = mLimit.y - (mSize.height / 2);            mVelocity.y  = 0.0;            mIsOnGround  = true;            mIsJumping   = false;            mIsWallSticking = false;            if(mIsPannable && mGridPosition.y <= mPanHeight)            {              mHighestHeightAttained = mGridPosition.y;              mWorld.collapse(mPanHeight);              mIsPannable = false;              console.log("Collapse!");            }          }       }());      (function detectRoofCollision()       {          mLimit.y = getMostRoof(mGridPosition, -1);          if((This.global.y - (mSize.height / 2)) <= mLimit.y)          {            mMovieClip.y = mLimit.y + (mSize.width / 2);            mVelocity.y = 0.0;          }       }());      (function detectLeftWallCollision()       {          mLimit.x = getMostWall(mGridPosition , -1);          if(This.global.x - (mSize.width / 2) <= (mLimit.x + mWorld.blockSize))          {            mMovieClip.x = mLimit.x + mWorld.blockSize + (mSize.width / 2);            mMovieClip.scale.x = 1;            // check if jumping when on the edge of the wall            if(mIsJumping && mVelocity.y > 0)            {              mVelocity.y     = 0.0;              mIsWallSticking = true;              mIsJumping      = false;              mIsTouchingLeftMostWall = true;            }          }          else          {            if(!mIsTouchingRightMostWall)              mIsWallSticking = false;            mIsTouchingLeftMostWall = false;          }       })();      (function detectMostRightWallCollision()       {          mLimit.x = getMostWall(mGridPosition , 1);          if(This.global.x + (mSize.width / 2) >= mLimit.x)          {            mMovieClip.x = mLimit.x - (mSize.width / 2);            mMovieClip.scale.x = -1;            // check if jumping when on the edge of the wall            if(mIsJumping && mVelocity.y > 0)            {              mVelocity.y     = 0.0;              mIsWallSticking = true;              mIsJumping      = false;              mIsTouchingRightMostWall = true;            }          }          else          {            if(!mIsTouchingLeftMostWall)                mIsWallSticking = false;            mIsTouchingRightMostWall = false;          }       })();    }    function getMostWall(gridPosition , direction)    {      var gpos = {};      gpos.x = gridPosition.x + (1 * direction);      gpos.y = gridPosition.y;      var block = mWorld.getBlock(gpos);      if(block !== null)      {        if(!block.isSolid)          return getMostWall({x : gridPosition.x + (1 * direction) , y : gridPosition.y} , direction);        else        {          var limitX = 0;          var point = new PIXI.Point();                    if(direction === 1)          {            mCurrentRightWall = block;            point = mCurrentRightWall.getGlobalPosition(point);            point.x += mGlobalContainer.x;            point.y += mGlobalContainer.y;            limitX = point.x;          }          else          {            mCurrentLeftWall = block;            point = mCurrentLeftWall.getGlobalPosition(point);            point.x += mGlobalContainer.x;            point.y += mGlobalContainer.y;            limitX = point.x;          }          return limitX;        }      }      else      {        return (direction === 1)? mWorld.pixelWidth : -mWorld.blockSize;      }    }    function getMostRoof(gridPosition , direction)    {      var gpos = {};      gpos.x = gridPosition.x;      gpos.y = gridPosition.y + (1 * direction);      var block = mWorld.getBlock(gpos);      if(block !== null)      {        if(!block.isSolid)          return getMostRoof({x : gridPosition.x , y : gridPosition.y + (1 * direction) } , direction);        else        {          var limitY = 0;          var point = new PIXI.Point();                    if(direction === 1)          {            mCurrentFloor = block;            point = mCurrentFloor.getGlobalPosition(point);            point.x += mGlobalContainer.x;            point.y += mGlobalContainer.y;            limitY = point.y;          }          else          {            mCurrentRoof = block;            point = mCurrentRoof.getGlobalPosition(point);            point.x += mGlobalContainer.x;            point.y += mGlobalContainer.y;            limitY = point.y + mWorld.blockSize;          }          return limitY;        }      }      else      {        return (direction === 1)? mWorld.pixelHeight : 0;      }    }    function jump()    {      if(mIsWallSticking)      {        mDirection      = mDirection * -1;        mVelocity.y     = -mJumpSpeed;        mIsJumping      = true;        mIsOnGround     = false;        mIsWallSticking = false;      }      else if(mIsOnGround)      {        mIsJumping = true;        mIsOnGround = false;        mVelocity.y = -mJumpSpeed;      }    }    mWorld.onPanFinished = function()    {      mIsPannable = true;      mMovieClip.y -= mPanHeight * mWorld.blockSize;    }    mMovieClip.x = (mWorld.startingBlock.x + (mWorld.blockSize / 2));    mMovieClip.y = (mWorld.startingBlock.y + (mWorld.blockSize / 2)) + (mSize.height / 2);    mHighestHeightAttained = Math.floor(mMovieClip.y / mWorld.blockSize);    return This;  }  return {      create : function(stage , screenSize)      {        return Toon(stage , screenSize);      }    };});

World.js

define(['tween', 'src/Segment', 'src/Block'] , function(TWEEN, Segment, Block){  function World(stage, globalContainer, screenSize)  {    var mScreenSize = screenSize;    var mStage = stage;    var mGlobalContainer = globalContainer;    var mBlockSize = 82;    var mSize = {width : 0 , height : 0};    var mLevelSegmentsLookup = [];    var mBlockPool      = [];    var mVoidPool       = [];    var mOpenedDoorPool = [];    var mClosedDoorPool = [];    var mQueueArea = []    var mPlayArea  = [];    var mPlayAreaHolder = [];    var mLevels = [];    var mOnPanFinished = function(){};    var mStartingBlock = null;    var This =      {          init : init        , get blockSize(){ return mBlockSize; }        , get startingBlock(){ return mStartingBlock; }        , getBlock    : getBlock        , borrowBlock : borrowBlock        , returnBlock : returnBlock        , update : update        , collapse : collapse        , get size(){ return mSize; }        , get width(){ return mSize.width; }        , get height(){ return mSize.height; }        , get pixelWidth(){ return mSize.width * mBlockSize; }        , get pixelHeight(){ return mSize.height * mBlockSize; }        , get globalContainer(){ return mGlobalContainer; }        , get container(){ return mStage; }        , get onPanFinished(){ return mOnPanFinished; }        , set onPanFinished(callback){ mOnPanFinished = callback; }      };    ...    function removeSegmentFromBottom(count)    {      for(var i = 0; i < count; ++i)      {        var part = mPlayArea.pop();        for(var x = 0; x < part.length; ++x)        {          var block = part[x];          block.invalidate(mStage);          returnBlock(block);        }      }      mSize.height = mPlayArea.length;      mSize.width  = mPlayArea[0].length;    }    function addSegmentToTop(count)    {      var previousHeight = mPlayArea[0][0].y;      for(var y = 0; y < count; y++)      {        if(mQueueArea.length === 0)        {          var randomQueuedLevel = randomWithinRange(0, mLevels.length - 1);          var additionalLevel = makeLevel(mLevels[randomQueuedLevel].slice() , false).data;          mQueueArea = mQueueArea.concat(additionalLevel);        }        var newPart = mQueueArea.pop();        for(var x = 0; x < newPart.length; ++x)        {          var block = newPart[x];          if(block.sprite !== null)          {            block.x = x * mBlockSize;            block.y = ((y + 1) * -mBlockSize) + previousHeight;            block.gx = x;            block.gy = y;            mStage.addChild(block.sprite);          }        }        mPlayArea.unshift(newPart);      }      refreshGridPositions();      mSize.height = mPlayArea.length;      mSize.width  = mPlayArea[0].length;    }    function refreshGridPositions()    {      for(var y = 0; y < mPlayArea.length; ++y)      {        for(var x = 0; x < mPlayArea[y].length; ++x)        {          var block = mPlayArea[y][x];          block.gx = x;          block.gy = y;        }      }    }    function update(elapsed)    {      TWEEN.update();      // mStage.position.y += elapsed * 60;    }    function collapse(times)    {      addSegmentToTop(times);      // mStage.position.y += times * mBlockSize;      // removeSegmentFromBottom(times);      // if(mOnPanFinished) mOnPanFinished();      var positionY = mStage.position.y;      new TWEEN.Tween({y : 0})        .to({y : times * mBlockSize}, 5000)        .onUpdate(function()          {            mStage.position.y = positionY + this.y;            console.log("Updating... panning...");          })       .onComplete(function()          {            //console.log("Panning finished");            if(mOnPanFinished) mOnPanFinished();            removeSegmentFromBottom(times);            //console.log("Size of play area should be constant : " + mPlayArea.length);            //console.log("Number of sprite should be constant : " + mStage.children.length);          })        .start();    }    function getBlock(gridPosition)    {      if((gridPosition.x >= 0 && gridPosition.x < mSize.width)      && (gridPosition.y >= 0 && gridPosition.y < mSize.height))      {        var block = mPlayArea[gridPosition.y][gridPosition.x];        return (block === undefined)? null : block;      }      return null;    }    function randomWithinRange(min , max)    {      return Math.floor(Math.random() * (max - min + 1)) + min;    }    return This;  }  return {    create : function(stage, screenSize, viewPort)    {      return World(stage, screenSize, viewPort);    }  };});

Block.js

define(['pixi'] , function(PIXI){  var Type =      {          None     : 0        , Block1x1 : 1        , Start    : 8      };  function Block(type, size)  {    var mType =  type;    var mSize = size;    var mIsSolid = false;    var mIsStartingPosition = false;    var mIsEndingPosition = false;    var mBlockSize = size;    var mGridPosition =  {x : 0 , y : 0};    var mPosition = {x : 0 , y : 0};    var mSprite = getSpriteFromFrame(type);    var Class =        {            get sprite(){ return mSprite; }          , get position(){ return mSprite.position; } , set position(position){ mSprite.position = position; }          , get x(){ return mPosition.x; } , set x(x){ mPosition.x = x; if(mSprite !== null) mSprite.x = x; }          , get y(){ return mPosition.y; } , set y(y){ mPosition.y = y; if(mSprite !== null) mSprite.y = y; }          , get isSolid(){ return mIsSolid; }          , get type(){ return mType; }          , get startingPosition(){ return mIsStartingPosition; }          , get endingPosition(){ return mIsEndingPosition; }          , get gridPosition(){ return mGridPosition; } , set gridPosition(gridPosition){ mGridPosition = gridPosition; }          , get gx(){ return mGridPosition.x; } , get gy(){ return mGridPosition.y; }          , set gx(x){ mGridPosition.x = x; } , set gy(y){ mGridPosition.y = y; }          , get size(){ return mSize; }          , getGlobalPosition : getGlobalPosition          , invalidate : invalidate        };    function getGlobalPosition(point)    {      // remove the debug tile afterwards      return mSprite.toGlobal(point);    }    function getSpriteFromFrame(type)    {      var sprite = null;      switch(type)      {        case Type.None:          sprite = PIXI.Sprite.fromFrame('sample_tilebg.png');          mIsSolid = false;          break;        case Type.Block1x1:          sprite = PIXI.Sprite.fromFrame('sample_block.png');          mIsSolid = true;          break;        case Type.Start:          sprite = PIXI.Sprite.fromFrame('sample_door.png');          mIsStartingPosition = true;          mIsSolid = false;          break;        default:          sprite = null;          mIsSolid = false;          console.log("Could not identify block type : " + type);          break;      }      return sprite;    }    function invalidate(stage)    {      if(stage)        stage.removeChild(mSprite);    }    return Class;  }  return{      Type   : Type    , create : function(type, size)    {      return Block(type , size);    }  };});

I am gonna be so dead tomorrow

neonwarge04 · December 7, 2015

[Edit] Instead of adding maincontainers position you could also do
point = mainContainer.toLocal(point)

This would fail actually. My mainContainer doesn't have a parent. If I run it this way, it will throw an exception.

Uncaught TypeError: Cannot read property 'worldTransform' of null

Exca · December 8, 2015

Yeah, if your maincontainer is the stage that is renderered then you dont need to have to toLocal as everything is relative to that mainstage already.

So basically what you want is not to find out what coordinates your sprite represents in the global coordinates, but what grid position you should compare against right?

You can do that by getting the toons coordinates relative to the subContainer.
point = sprite.toLocal(sub);

This should give you the same value as what you would get if the sprite was inside your subContainer.

Then you need to calculate the grid coordinates based on your x&y -values. You can do that just as you said by dividing coordinates with the tile widht & height. After that you just need to add the height of the grid to the calculated grid y coordinate until you are inside of the grid.

Another (and better in my opinion) option would be to calculate at which point the loop happens and then just reset the subcontainer position back to what is was at the start. That way your toon is always inside of the grid. This requires that the grid is looping.

ivan.popelyshev · December 8, 2015

I didnt have time yet but I'll answer you layer and describe my solution for gameofbombs.com. My map can be large, it can be looped, and not only a thorus way, but also real projective plane, sphere and the most boring case - klein bottle. Thinking with portals ©

neonwarge04 · December 9, 2015

Exca thank you for your reply! Thats another way to put it!

Also I was able to figure it out what was wrong. In fact I am doing it wrong, I am checking the limitX/Y via global coordinates of the toon. This is wrong. I realize I only need the global coordinates of the toon, calculate the grid position base on that and retrieve the colliding object from the sensor:

      (function detectFloorCollision()       {          mLimit.y = getMostRoof(mGridPosition , 1);                    // I should be comparing mMovieClip's position inside the subcontainer          if((mMovieClip.y + (mSize.height / 2)) >= mLimit.y)          {            mMovieClip.y = mLimit.y - (mSize.height / 2);            mVelocity.y  = 0.0;            mIsOnGround  = true;            mIsJumping   = false;            mIsWallSticking = false;            if(mIsPannable && mGridPosition.y <= mPanHeight)            {              mHighestHeightAttained = mGridPosition.y;              mWorld.collapse(mPanHeight);              mIsPannable = false;              console.log("Collapse!");            }          }       }());

I realize I am comparing a global coordinate with a coordinate for subcontainer. In fact, in-game it doesn't really matter where the sprites are inside the sub container. This is completely irrelevant. My worry before is computing the y coordinate inside the subcontainer which become increasingly negative as I go up. I can't compute for grid position given this data. Also I replaced the code where it will give me the location of the block sprite in the subcontainer since I am computing for its global position as well. In fact, I don't need the coordinates inside the subcontainer. My only concern is the position of Toon on global container being inside the subcontainer.

So here is what it looks like:

    function getMostRoof(gridPosition , direction)    {      var gpos = {};      gpos.x = gridPosition.x;      gpos.y = gridPosition.y + (1 * direction);      var block = mWorld.getBlock(gpos);      var point = new PIXI.Point();      if(block !== null)      {        if(!block.isSolid)          return getMostRoof({x : gridPosition.x , y : gridPosition.y + (1 * direction) } , direction);        else        {          var limitY = 0;                    // same as before, get the position from the subcontainer and return that as limitY          if(direction === 1)          {            mCurrentFloor = block;            limitY = mCurrentFloor.y;          }          else          {            mCurrentRoof = block;            limitY = mCurrentRoof.y + mWorld.blockSize;          }          return limitY;        }      }      else      {        /*          Date: December 8, 2015          Note: Double check roof and floor bounds when no block detected          Perhaps use the (0,0)/(0,n) most block and check collision against it?        */        return (direction === 1)? mWorld.pixelHeight : mMovieClip.y - mWorld.pixelHeight;      }    }

There you go! I got my game mechanics working out so far right now. Thanks for your help!

Nexios · March 18, 2017

On 6. 12. 2015 at 1:59 PM, neonwarge04 said:

I think I got it now!

I lack understanding between local vs global coordinates. I used global and it looks pretty well so far, and this is the data I exactly need for the game!


<!DOCTYPE html><html>    <head>        <title>Screen Panning Sample</title>        <script src="core/pixi.js"></script>    </head>    <body>        <script>                    var screenSize = {width : 800 , height : 600 };            var renderer = PIXI.autoDetectRenderer(screenSize.width, screenSize.height, {});            var sprite = null;                        var subStage = new PIXI.Container();            var stage = new PIXI.Container();            stage.addChild(subStage);                        new PIXI.loaders.Loader()                .add('res/textures/textures.json')                .once('complete' , function()                    {                        sprite = new PIXI.Sprite.fromFrame('0.png');                        sprite.anchor.x = 0.5;                        sprite.anchor.y = 0.5;                        sprite.position.x = screenSize.width / 2;                        sprite.position.y = screenSize.height / 2;                                        subStage.addChild(sprite);                        update();                    })                .load();                        function update()            {                renderer.render(stage);                subStage.position.y += 0.016667 * 20;                sprite.x += 0.016667 * 20;                                var glb = sprite.toGlobal(stage.position);                var act = sprite.position;                                console.log("global coords : " + glb.x + ' ' + glb.y);                console.log("actual coords : " + act.x + ' ' + act.y);                                requestAnimationFrame(update);            }                        document.body.appendChild(renderer.view);                    </script>    </body></html>

Thank you!!!

i faking love you <3 u saved my life, thank you so much

ivan.popelyshev · March 18, 2017

@Nexios much necropost But its ok

Help - Some clarifications about DisplayObject.toLocal and how it will fit my game logic

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Recently Browsing 0 members