OnGe

Members
  • Content Count

    16
  • Joined

  • Last visited

About OnGe

  • Rank
    Member

Contact Methods

  • Website URL
    http://webgame.land

Profile Information

  • Gender
    Not Telling
  1. In this case, center is half of width and height of container. Here is working example: http://test.onge.cz/sword/ It works fine, if everything in container si at right place. And get broken if something is somewhere else and its hard to find why. Thats why Im looking for way to outline container.
  2. We are getting far from orginal question. But ok, i use it for pivot, so its about rotation. Any better idea? Is there any other way to set pivot on center of object, without working with width/height?
  3. I know. But children may be transparent, out of view or otherwise invisible. Then it inflates container and if you set, for example, container.pivot.x = container.width / 2 and try to rotate it, pivot point is somewhere else than you expected. And its hard to debug such thing. This is why I am looking for some way to outline container.
  4. Is there any way to draw border around container, so one can see where container really is? I know container doesnt render, but is there some trick to mock it up? For context: Im trying to glue some sprites together to create one object. I put them in container and attach it somewhere, but it acts weird. Problem is probably that container has different size than image I can see (i.e. sprites inside container doesnt fill entire size of container, so center of it is somewhere else I think).
  5. OnGe

    Responsive scene

    Well, I have found where is the problem with position. It was somewhere between keyboard and chair. I have feature that move view according to mouse drag. So it overwriten any change to position I made. So, I had towrap everything in another container and center this one. So, there is no problem in changing position of container.
  6. OnGe

    Responsive scene

    Aha, I was trying to set container.position.x directly. By set method it works just fine. Seems directly accesed position.x havent changed at all, I just havent realized why, because no error was thrown. This should save me of some problems, thanks! About Math.floor, I had some issues with float given by some browser. Half-pixels or something like that. Cant recall more details. EDIT: Oh, crap. Position adjusts just y, x is still 0. Strange...
  7. OnGe

    Responsive scene

    Well, seems I got it. Just not sure if there is no better way to do it. Trick is to compose squere scene (1000x1000 in my case) and then modify renderer width or height according to canvas size. Canvas is by css set to be 100% width and height of window. See renderer setting: // viewport dimensions var baseWidth = Math.floor(window.innerWidth); var baseHeight = Math.floor(window.innerHeight); // scene dimensions var projectedWidth = 1000; var projectedHeight = 1000; // viewport aspect ratio var aspectRatio = baseWidth / baseHeight; // renderer acctual dimensions var rendererWidth = projectedWidth * aspectRatio; var rendererHeight = projectedHeight; renderer = PIXI.autoDetectRenderer(rendererWidth, rendererHeight, {backgroundColor : 0x446276, view: document.getElementById("stage")});Second important thing is to center containers, so x 0 is in middle of viewport. Found that part tricky, because changing container.position.x had no effect. But changing pivot works (just hope it doesnt screw up something else): container.pivot.x = rendererWidth / -2Then I can place any sprite relatively to center of screen (on x axis, y is always 0-1000, so there is no need to center it). Values greater than 0 are on right, lower than 0 are on left from center. Resizing is taken care of by pixi and everything is scaled proportionaly, because canvas and renderer aspect ratios are same. So, this way scene is always centered, no matter of screen size or aspect ratio, everything is proportional and everybody happy. Im bit afraid about pivot point, but right now, it seems it works... EDIT: it is better to change container.position. See posts bellow
  8. OnGe

    Responsive scene

    Thanks for your solution. Starfield helped me sort some things up. Now I have some idea, lets see how it ends... Nope, this is exactly what Im trying to avoid. Lets say I want window into game world that always contain as much as possible, while rest of the world is over the corner, if it doesnt fit with current aspect ratio.
  9. OnGe

    Responsive scene

    Overcomplicating things - that is my big curse Show 600x600 of 1000x600 world is fine. But how do I do that? If I let renderer fit canvas and canvas is 100% of viewport, it just deforms it contents (so, it squish 1000x600 to be 600x600 instead of cropping).
  10. OnGe

    Responsive scene

    Im trying to make app that will work fine on any screen. That means any resolution and any aspect ratio. I have canvas that fill 100% width and height of viewport. Problem is that renderer has absolute dimensions and it fits to canvas. Its fine when aspect ratio is same, but view is deformed on different ratios - and I dont want that. I have managed to make something that tentatively holds shape, but is far from looking same on any screen. I will describe my approach here and would be happy if you will tell me about yours. Or some best practices, if there are any. So, here is what I have done: I set size of renderer same as viewport (window.innerWidth and window.innerHeight) I have some default project size as base (1280 x 900) as reference frame for absolute positioning and scaling I have percentage of width and height, so I can place items relatively on screen Sprites are placed on scene both relatively (x% from top and left) and absolutely (most time x% + number of pixels). Absolute positioning is there because there was problem to fit sprites near each other and not overlap them Sprites are anchored in center (0.5, 0.5) Sprite size is modified by mean of width and height of viewport compared to project base size (viewport of 1280 x 900 is same as project original size, so modifier is 1. 900 x 1280 would be 1 too. 640 x 900 would be 0.75, because width is 0.5 and height is 1...) It is not a problem if something goes off screen on left/right, but scene should cover full view, so no "white spaces" or letterbox anywhere.I may upload example, but its experiment of everything about pixi, so there is shitload of other things that have nothing to do with this issue and would be pain to remove that, so I hope my description is sufficient. When I look at this after few days, its quite complicated and it should be more simple... I hope. Worst problem I see is fitting sprites in different aspect ratios proportionally without breaking composition of scene. My current solution is just breaking composition little bit. So, what is better way to do this?
  11. What Im trying to get here is some deeper understanding of how this stuff works, because (besides that deeper understanding is always good thing) I had some problems with my experiments (involving relatively big images, color matrix and other funny things) like crushing mobile browsers, cropping parts of images that are out of screen initialy and many other wtf things that I atribute to some internal optimization. But Im not sure if it is on pixi, browser, WebGL or whatever else. And maybe Im totally wrong at all. And to figure it out, I seek some deeper insight. Anyway, I was looking at TextureCache because I got idea to somehow turn scene made of many sprites into one static cached image to save resources. And maybe save that composed image to localStorage and load it instead of parts next time. Meanwhile I have found that this may make things even worse. And, as you say, TextureCache is something completely different than what I want. If it is really that simple, then Im looking to wrong things...and also there is not much deeper understanding to get on this Thanks for clarifying.
  12. You may also check WebGL properties on different browsers/devices with this page: https://www.browserleaks.com/webgl Fun thing is when you realize that your stuff dont work because you have WebGL disabled in your browser and its too much for canvas
  13. Thanks, but Im not looking for API docs or simple use cases, what I need is some wider context. Like what is for what and why, how it works and so on - stuff that may seem obvious, if you already know it, but is not quite obvious if you dont. TextureCache is good example - first I think it may help me with performance. Now it looks like its transparent and I can hardly make some more with it.
  14. Im learning how Loader and TextureCache works in order to figure out some optimal way to load resources. Unfortunaly, cant find much useful info about this topic. Anybody know where to look? Or care to give little insight?
  15. To allow this stuff to work with touch as well, you can just use eventData.data instead of mouse. See the snippet bellow. // display x - y coordinates for mouse onlyconsole.log(renderer.plugins.interaction.mouse.global.x + ' - ' + renderer.plugins.interaction.mouse.global.y);// display x - y coordinates for mouse or touch eventsconsole.log(renderer.plugins.interaction.eventData.data.global.x + ' - ' + renderer.plugins.interaction.eventData.data.global.y);May seem obvious, but to find that out...