neonwarge04

Members
  • Content Count

    66
  • Joined

  • Last visited

About neonwarge04

  • Rank
    Advanced Member

Recent Profile Visitors

701 profile views
  1. Hi BobF, I noticed that as well. I finally settled down using the prototype approach when I deal with objects I planned to create multiple times and modular approach when I deal with classes I don't have to instantiate multiple times. At least, this what makes sense to me. Thanks a lot for the input!
  2. define([], function() { var MyClass = (function() { var x = "Hello World!"; var MyClass = function(){}; MyClass.prototype.sayHello = function() { console.log(x); } MyClass.prototype.setHelloMessage = function(mes) { x = mes; } return MyClass; })(); return { create : function() { return MyClass(); } } }); I finally came up with this approach, going back to basic. I need to conserve memory because it is utmost importance in the project we are working on. I still need to work on the return though but we are working on it. Thank you very much!
  3. Wow, thanks for this BobF. It finally came into my senses that what is prototype for. It means that those function are created each time but if they are a prototype of '{}' means all instance uses one copy those function. Since function is also treated as objects, it can be a problem in terms of RAM. The member variables of the object are then reference by 'this', which I highly avoided as it has convoluted my code from early attempts in javascript. Thanks for the insight.
  4. Hi, I am new on javascript and I can't get my head wrapped on Objects. Is my way of creating objects correct? I am using this way along with require.js. I am having few comments from my colleague that this is somehow wrong. define( [ 'pixi' , 'howler' , 'tween' , 'tweenmax' , 'src/Random.js' , 'src/Giant' ], function(PIXI, Howl, TWEEN, TweenLite, Random, Giant) { var Direction = { Up : 0, Down : 1, Left : 2, Right : 3 }; function Spawner(stage , direction) { var mDirection = direction; var mStage = stage; var This = { get x(){ return mSprite.position.x; } , get y(){ return mSprite.position.y; } , set x(x){ mSprite.position.x = x; } , set y(y){ mSprite.position.y = y; } , function1 : function1 , function2 : function2 , function3 : function3 }; var mSprite = PIXI.Sprite.fromFrame('spawnarea.png'); mSprite.anchor.x = 0.5; mSprite.anchor.y = 0.5; function function1(stage) { } function function2() { } function function3() { } return This; } return { Direction : Direction , create : function(stage , direction) { return Spawner(stage , direction); } } }); The reason I chose this method because I don't have to use the 'this' keyword every time I refer to my variables for functions. When I first started JS I did the the prototypal way and my code was a mess. Using this approach, I also don't have to bind to 'this' every time I reference outer variables from a callback function. I also have some variables/functions that are private and make them public by augmenting them to 'This = {}'. Basically the Spawner function is just simple a method for constructing the '{}' object. What do you think? Is there something that I missed here? Caveats? Cons on this approach? I'll appreciate your input very much.
  5. I am struggling, the only resource I found is this. I have not dealt with the code yet, but concepts on how to deal with it. So the thought I came up with is to create a circle via PIXI.Graphics and make this a mask on another black transparent graphics object. The thing is, I wanted my Circle mask to look like a degrading pie chart overtime. I need to be it like this for some reason not like the one on the link. Basically, what I am asking is this, how can I make a circle, to fan left and to fan right (I don't know if I am using the right term)? I needed to draw a fanning effect so I can create a cooldown effect not just this, but some other cool stuff like a loading indicators something similar to Imgur, regardless the shape of my object of interest. Here is what I came up with: This is fairly easy to do in Pixi.js or any other similar renderer libraries out there. But how can I make my circle to have a pie slice like this and it should grow overtime? so I can make something like this (Not just specifically this by the way): I don't like codes by the way. Just concept. I really can get my head wrap around this thing. I don't even know what its properly called (aside from calling it a circular cooldown effect) which made me even more frustrated. I need help! Thanks!
  6. Thats the thing, I cannot use Ludei CocoonJS, it is required to stick with Cordova for some reason.
  7. Hi, I am kind of frustrated since I cannot run my app with smooth performance when using a phone running Android 4.1.2. It only gives me 8-11 fps. I am using Cordova-Crosswalk plugin, it works find on higher end phone but this is just a very simple game and yet cannot run on lower-end devices. Can you provide some ideas what else I might be missing here? Thank you!
  8. Would this work? I think I am giving up with this HTML5 JavaScript mobile development. THis is such pain in the a$$ to work with. I am forced to use this anyway. I could have used something else but I can't. Is there a way for me to make this work through phone gap? I've been rejected using Cocoon.js. All I get is smirk faces as Cocoon.js is infected with ebola. I am stuck with PhoneGap. Have you tried pixi.js app to work with PhoneGap? If so, how?
  9. Hi I am having difficulty with PhoneGap with Pixi.js. I can't seem to see my renderer.view on the screen? It just show the text "Hello World and Hello Universe" and a whitescreen. This should be basically simple. I tried to modify the files and trim the bloatware scripts that I don't even need. It is working, but I can't see the renderer, my game for that matter. What else I missed? Documentation is not helping me either anyway: <!DOCTYPE html><!-- Copyright (c) 2012-2014 Adobe Systems Incorporated. All rights reserved. Licensed to the Apache Software Foundation (ASF) under one or more contributor license agreements. See the NOTICE file distributed with this work for additional information regarding copyright ownership. The ASF licenses this file to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.--><html> <head> <meta charset="utf-8" /> <script data-main="main" src="core/require.js"></script> <title>Hello World</title> <style> body{ margin : 0; padding : 0; } #gamediv { width : 100%; height : auto; margin : 0; padding : 0; } </style> </head> <body> <script type="text/javascript" src="cordova.js"></script> <script type="text/javascript" src="js/index.js"></script> <script type="text/javascript"> app.initialize(); </script> <div id="gamediv"> Hello World and Hello Universe!!! </div> </body></html>Please let me know if you need more source files to check out. Thank you!
  10. How can I handle sprite coordinates when the container it belongs to scaled? I am trying to resize my game app base on the size of the screen but the scaling seems to disrupt my toons grid location. This is only occurs when I resize (scale) the game to fit the device screen. What I am trying to do is that I have two containers, MainContainer and SubContainer. MainContainer is what I use generally for common view for example placing some UI parts. The SubContainer is what I use to pan the world around. I have been successful using this setup but it breaks when I scale the screen to fit into the device. For instance I am scaling the MainContainer. Is there a solution for this? How am I suppose to handle this? What I have been thinking is to get how much pixels do the screen scaled to and account for it and apply the difference to every sprite but I am not sure about this. Thanks for your help!
  11. 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!
  12. This would fail actually. My mainContainer doesn't have a parent. If I run it this way, it will throw an exception.
  13. 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
  14. 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?
  15. 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!!!