Comments (45)
Sounds like a plan! You are pretty much right on the money!
For each tile i would create a texture that shares the same baseTexture. Theres a great example of tiled sprite sheet usage here: http://renaun.com/blog/2013/03/using-illustrator-from-the-adobe-creative-cloud-and-pixi-js-to-create-an-8-way-character-animation/
Good luck sir! and of course feel free to give me a shout if you have any questions :)
from pixijs.
Nice! Then consider large maps a 512x512 tile map will create 262,144 Sprite (and Texture) objects. In such a case I would need to load only those tiles around the viewport, and load dynamically as we move around. However, old Sprites/Textures that I leave behind will stay in memory.
Do I need to be cleaning these up as I go around? Is there more that I need to do than remove my references so that th GC can sweep up? Is there some WebGL deallocation that needs to happen?
from pixijs.
Yes. The good news is is that the same texture can be (and should) be re-used for each sprite. The base texture for the tile map will only be stored once in the texture cache and on the gpu. A pixi.js texture is basically a rectangle and a reference to a baseTexture which is where the image information is stored. This should leave you with a nice low memory foot print.. (one 512x512 image)
I would also consider only showing the sprites that are visible as you say. I would then use an object pool to get and return tiles as the come in to view. This way you never need to hold more sprites than are visible on screen... will make it run super fast :D
from pixijs.
That's the plan, thanks for the tip GBD. Already converted gf's entity system to pixi, only got the maps and some util stuff to go and we should be rolling. Appreciate the help!
from pixijs.
no worries :)
from pixijs.
What about moving the camera? When I used three, as the player moved around the camera followed him in such a way that they stayed centered. How can I accomplish this in pixi? I don't see a camera object in the API Docs.
Or should I be moving the tilemap sprites opposite of their input to give the illusion of movement?
from pixijs.
Exactly that sir! You could add them to a displayObjectContainer and that around the opposite direction to you camera values.. thats pretty much all a "camera" is :)
from pixijs.
The big difference is that now my player Entity's position never changes, the Map's does. Before, having the camera "track" any entity was optional and something you could turn on and off, and switch between entities at will because I actually had a camera to manipulate. Now I have to modify the scene graph based on which entity the camera tracks (entities not being tracked need to be in the Map ObjectContainer, and the tracked entity needs to be without).
I can do it, just want to make sure this is the best way before I start down that path.
from pixijs.
Cool, I think every entity could be in the container.
And say your camera needs to track a specific entity then I would set the map container to "x:-entity.position.x, -y:entity.position.y" if ya see what i mean?
from pixijs.
I do, I will just have to rework the move system a bit.
from pixijs.
So now that I got the tilemap working correctly, and I try to move the displayObject container's position around I get some tearing (event without scaling), in some positions it aligned properly and in some positions it has gaps. I am using gl.NEAREST
filtering, but I am not scaling.
from pixijs.
hmm.. looks like a rounding issue.. could try rounding the positions to see if that fixes it? If it does we could implement a sort of whole pixels only feature into pixi.js?
from pixijs.
I am only using whole numbers for positions right now. Each sprite has an increment of 16 (16x16 tiles) as it's position, and I am moving the container by +-10.
I had this same issue in three.js and I had to floor my positions in the shader to get it to line up right.
from pixijs.
cool, could be an issue with the uv coords? A tricky one, definitely need to nail this!
is there somewhere I can look at your code?
from pixijs.
Sure let push and put a demo up.
from pixijs.
nice one
from pixijs.
http://static.pantherdev.com/dev/lttp-webgl/
Give it a couple seconds to load the world json file and assets, it isn't tiny. Once the map loads you can move it around by tapping W, A, S, and D. The latest gf code it is using to render the maps starts in TiledMap where is renders the layers:
https://github.com/englercj/grapefruit/blob/master/src/map/tiled/TiledMap.js#L119
It creates the layer, adds it as a child (it is also a DisplayObjectContainer), then calls renderTiles, which is:
https://github.com/englercj/grapefruit/blob/master/src/map/tiled/TiledLayer.js#L45
Which will render only the viewport tiles. All the textures for the sprites are cached in TiledTileset, and reused for different sprites pulled from a pool system in TiledLayer. The map is added to the scene, and everything renders from that. I am changing the map location in the lttp-webgl code when you move:
https://github.com/englercj/lttp-webgl/blob/master/js/game/entities.js#L147
Let me know if you see anything crappy!
from pixijs.
hey looks ace! (all being rendered in one render call too :D ). Will look at trying to fix it soon..
from pixijs.
hey have you tried making the sprite sheet a power of 2?
from pixijs.
It is 256x512, so it is
from pixijs.
oh, I mean the main image: http://static.pantherdev.com/dev/lttp-webgl/assets/worlds/lightworld/lightworld-tileset.png
its 1168 x 1216
just a hunch really as the y movement seems to work fine?
from pixijs.
both tear for me lol.
Ill try though, I have to make that image HUGE to be POT
from pixijs.
Yes, I definately get the same issues with a POT texture :/
from pixijs.
@englercj hello! just wandering, would you mind changing your background of you scene in the above to white? that way if the gaps are still black we can confirm its a uv mapping issue rather than a position issue?
from pixijs.
I did this in the console:
gf.game._stage.setBackgroundColor(0xFF00FF);
and got this result:
So looks like a UV mapping issue. The stage changed changed color, but the tears didn't.
from pixijs.
nice one! that brings us a little closer :)
from pixijs.
@englercj here we go!
so I think the culprit is this:
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
If you comment out those two lines in webGLRenderer and use NEAREST (as you are) then that should fix it :)
This means that textures will need to be power of 2 though :/
Let me know how it goes!
Cheers!
from pixijs.
Sweet! I will try it out tonight, I built an actual camera
now so I'll be testing a couple things tonight. I will let you know how it goes.
from pixijs.
Didn't get a change to test this tonight, spent all my time on tilemap culling. I will take a look at this tomorrow night!
from pixijs.
Hmmm, I changed the tileset image to be 2048x2048 regenerated the tilemap, and commented out those lines and I am still getting tearing 😦
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
//gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
//gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
(on the bright side my camera works lol). I updated the test page with the newest code, though make sure you empty your browser cache before you look at it. If you don't center on the link character and walk him around with W, A, S, and D then you don't have the latest code.
from pixijs.
Thanks for trying,
Had a little dig around and it seems that the positions of the tiles occasionally still ends up on a half pixel causing the issue.. check out the image below which shows the position data in the GPU buffer:
Are you scaling or moving the camera on half pixels at all?
from pixijs.
@GoodBoyDigital I think it may be possible for that to happen, let me try messing with the pan calculations a bit...
from pixijs.
@GoodBoyDigital You nailed it, that is definitely what was causing the tearing.
I tried to round the camera pan values, but that gave me a jumpy camera since the player is moving at floating precision velocity. Making the velocity integer isn't really an option because it will make gravity and friction calculations wildly inaccurate. Any suggestions?
from pixijs.
I see what ya mean, you should keep all that stuff floating point. Definitely dont want velocity as an int.
You could edit pixi.js to round up all position values in the updateTransform function in PIXI.DisplayObject
localTransform[2] = this.position.x;
localTransform[5] = this.position.y;
could change to:
localTransform[2] = (this..position.x + 0.5) | 0;
localTransform[5] = (this..position.y + 0.5) | 0;
this way position can be any value but will get rounded as its transform matrix is calculated.
Also you could keep entity positions and entity view positions as separate points and set the view position to a rounded version of the actual position iyswim?
from pixijs.
Whole number view position, I like that. Also works well 😄 thanks for all the help, looks like I got it running smoothly now. Got a couple things to fix in chrome, and make more efficient but it does work! Thanks again!
from pixijs.
happy to help, can't wait to see more progress on the game!
from pixijs.
So the way the tilemap culling works is by generating the entire viewport (plus a 2 tile buffer around it) and storing those sprites. Then, as you move around it moves the sprites around and changes their texture (i.e. if you move 1 tile to the right, it takes the far left sprites and moves them to the far right and changes their texture to the proper one using .setTexture()
). This works fine in FF, and in IE (canvas renderer, which has trash performance but works); however in Chrome I get these lines of transparent tiles (0xff00ff is the background):
http://dl.dropbox.com/u/1810371/pics/pixi/lines2.png
It is really weird because I enable interactivity and make each tilemap sprite log itself if I click on it, and they all have the correct texture set, with the correct frame. Stranger still is if I expose the sprite I clicked on with something like window.spr = this;
inside my click callback, and then do something like spr.setTexture(gf.assetCache.sprite_link[5]);
to set the texture to one of Link's frames, then poof most of those transparent tiles refresh themselves to have the correct texture set. I feel like something is being optimized out or that I should be doing my culling differently...but this only happens to me in Chrome.
Public link updated: http://static.pantherdev.com/dev/lttp-webgl
Making all those sprites interactive is pretty intense, so the first load takes a while.
from pixijs.
@GoodBoyDigital ping, just in case you missed my last comment. Just want to make sure I am doing this culling the optimal way before moving forward. Notably the Chrome issue, and very poor performance when using the CanvasRenderer.
from pixijs.
Cool, yes looks like an optimisation is preventing the textures from being updated. Will take a look into that for you :)
with regards to canvas, I am currently working on some render to texture functionality (for caching etc), this will come in handy in optimising canvas
from pixijs.
@GoodBoyDigital Fantastic, I'm going to roll forward with this then. Thanks for all your help!
from pixijs.
@GoodBoyDigital Any update on this issue of the Chrome problem?
from pixijs.
HI @englercj is this problem still there with a new version of pixi?
from pixijs.
I thought we fixed it, but looks like a similar issue is popping up in grapefruitjs/grapefruit#29 I will have to investigate further.
from pixijs.
cool, let me know if I can help :)
from pixijs.
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)
- Bug: TypeError: Cannot read properties of null (reading 'uid') HOT 1
- Bug: The content of multiple texts overlaps with each other. HOT 17
- Bug: [v8] antialias=true drastically cuts performance even when idle HOT 3
- Bug: Arc line cap not re-rendered if graphics is cleared HOT 1
- Bug: v8 mask container bounds changes
- Bug: Unable to add a mask to the text HOT 1
- Bug: [v8] Multiple issues with mipmaps HOT 7
- Bug: Sprite alpha masks broken in chrome & edge HOT 7
- Bug: V8 text stroke is applied even with width 0. Also strokeThickness does not update at runtime
- Bug: [v8] double `onRender` of rendergroup? HOT 1
- Bug: Can't get updated worldTransform immediately
- Bug: [v8] arctifact when rendering big polygon with offscreen coordinates in Firefox and Safari HOT 4
- Is it possible to do a lossless rotation in Pixi?
- Bug: When forceCanvas is true, mask sprites with sprites doesn't work
- Bug: Some props like dropShadow and resolution are not updating for Text object.
- Bug: Generated Texture doesn't support scale mode since 8.1.0 HOT 2
- Bug: Events are firing twice when we have dynamic and static mode
- [bug] v8 NineSliceSprite doesnt works as mask on Sprite HOT 1
- Bug: v8 ESM is broken with esm.run HOT 4
- V8 Bug! HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from pixijs.