Giter Club home page Giter Club logo

Comments (45)

GoodBoyDigital avatar GoodBoyDigital commented on March 29, 2024

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.

englercj avatar englercj commented on March 29, 2024

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.

GoodBoyDigital avatar GoodBoyDigital commented on March 29, 2024

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.

englercj avatar englercj commented on March 29, 2024

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.

GoodBoyDigital avatar GoodBoyDigital commented on March 29, 2024

no worries :)

from pixijs.

englercj avatar englercj commented on March 29, 2024

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.

GoodBoyDigital avatar GoodBoyDigital commented on March 29, 2024

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.

englercj avatar englercj commented on March 29, 2024

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.

GoodBoyDigital avatar GoodBoyDigital commented on March 29, 2024

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.

englercj avatar englercj commented on March 29, 2024

I do, I will just have to rework the move system a bit.

from pixijs.

englercj avatar englercj commented on March 29, 2024

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.

tearing

from pixijs.

GoodBoyDigital avatar GoodBoyDigital commented on March 29, 2024

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.

englercj avatar englercj commented on March 29, 2024

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.

GoodBoyDigital avatar GoodBoyDigital commented on March 29, 2024

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.

englercj avatar englercj commented on March 29, 2024

Sure let push and put a demo up.

from pixijs.

GoodBoyDigital avatar GoodBoyDigital commented on March 29, 2024

nice one

from pixijs.

englercj avatar englercj commented on March 29, 2024

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.

GoodBoyDigital avatar GoodBoyDigital commented on March 29, 2024

hey looks ace! (all being rendered in one render call too :D ). Will look at trying to fix it soon..

from pixijs.

GoodBoyDigital avatar GoodBoyDigital commented on March 29, 2024

hey have you tried making the sprite sheet a power of 2?

from pixijs.

englercj avatar englercj commented on March 29, 2024

It is 256x512, so it is

from pixijs.

GoodBoyDigital avatar GoodBoyDigital commented on March 29, 2024

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.

englercj avatar englercj commented on March 29, 2024

both tear for me lol.

Ill try though, I have to make that image HUGE to be POT

from pixijs.

englercj avatar englercj commented on March 29, 2024

Yes, I definately get the same issues with a POT texture :/

from pixijs.

GoodBoyDigital avatar GoodBoyDigital commented on March 29, 2024

@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.

englercj avatar englercj commented on March 29, 2024

I did this in the console:

gf.game._stage.setBackgroundColor(0xFF00FF);

and got this result:

tearing 2

So looks like a UV mapping issue. The stage changed changed color, but the tears didn't.

from pixijs.

GoodBoyDigital avatar GoodBoyDigital commented on March 29, 2024

nice one! that brings us a little closer :)

from pixijs.

GoodBoyDigital avatar GoodBoyDigital commented on March 29, 2024

@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.

englercj avatar englercj commented on March 29, 2024

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.

englercj avatar englercj commented on March 29, 2024

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.

englercj avatar englercj commented on March 29, 2024

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.

GoodBoyDigital avatar GoodBoyDigital commented on March 29, 2024

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:

Image

Are you scaling or moving the camera on half pixels at all?

from pixijs.

englercj avatar englercj commented on March 29, 2024

@GoodBoyDigital I think it may be possible for that to happen, let me try messing with the pan calculations a bit...

from pixijs.

englercj avatar englercj commented on March 29, 2024

@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.

GoodBoyDigital avatar GoodBoyDigital commented on March 29, 2024

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.

englercj avatar englercj commented on March 29, 2024

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.

GoodBoyDigital avatar GoodBoyDigital commented on March 29, 2024

happy to help, can't wait to see more progress on the game!

from pixijs.

englercj avatar englercj commented on March 29, 2024

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.

englercj avatar englercj commented on March 29, 2024

@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.

GoodBoyDigital avatar GoodBoyDigital commented on March 29, 2024

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.

englercj avatar englercj commented on March 29, 2024

@GoodBoyDigital Fantastic, I'm going to roll forward with this then. Thanks for all your help!

from pixijs.

englercj avatar englercj commented on March 29, 2024

@GoodBoyDigital Any update on this issue of the Chrome problem?

from pixijs.

GoodBoyDigital avatar GoodBoyDigital commented on March 29, 2024

HI @englercj is this problem still there with a new version of pixi?

from pixijs.

englercj avatar englercj commented on March 29, 2024

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.

GoodBoyDigital avatar GoodBoyDigital commented on March 29, 2024

cool, let me know if I can help :)

from pixijs.

lock avatar lock commented on March 29, 2024

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)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.