ShotgunJed

Members
  • Content Count

    31
  • Joined

  • Last visited

About ShotgunJed

  • Rank
    Advanced Member

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. I know that a texture can be loaded from the website's assets (e.g: "/foo.png"). Is it possible to do something like this: let texture = (some texture from Pixi) document.body.appendChild(<img width=420 height=420 src=texture>); Can a html element use a pixi texture?
  2. Is it possible to have multiple webGL instances or Pixi.Renderer instances on one page? For example, I'm trying to make a page that has many items in a grid (like an online store), and I was thinking of having one pixi.Renderer for each item. But then I would have about 20 of these instances which I don't really like, because it may not be as fast as having 1 renderer. I know I could use 1 renderer, but I want to merge the interactive Pixi graphics with html elements. So I'm trying to do something like this: https://threejs.org/examples/webgl_multiple_elements.html The webgl render elements (the 3d shapes) are all placed within html divs. The way that is achieved is by having 1 renderer, drawing all the shapes in a grid, and "splicing" or splitting the renderer, having different parts of the scene draw to different placeholder divs, in each item. My questions: 1. Can Pixi.js do this "splicing"? i.e: 1 scene can render to multiple divs, and change the visible viewport, before rendering? 2. Is having 1 pixi renderer (fullscreen) = 20 small pixi renderers (fullscreen when put together) in regards to performance?
  3. ShotgunJed

    How to prevent zooming with browser?

    Thank you very much ivan! I need it for a multiplayer game so players do not see outside of their screen
  4. ShotgunJed

    How to prevent zooming with browser?

    Zooming with the browser seems to affect the size of the game. This is my code here: window.onresize = function (event) { var w = window.innerWidth; var h = window.innerHeight; renderer.view.style.width = w + "px"; renderer.view.style.height = h + "px"; renderer.resize(w, h); } How do I make it so regardless of how much the user is zoomed in their browser, the values w and h shouldn't change? (If the user resizes their window, it should change though)
  5. Which one is more better in terms of speed: (Regarding variables set in a game loop) update() { var xSpeed = player.xSpeed; // Do something } or: var xSpeed; update() { xSpeed = player.xSpeed; // Do something } Does the fact that update() getting called multiple times a second make it slower for the first approach, since the system has to initialise and then destroy the variable? Would it be better instead to cache the variables outside and just re-use them?
  6. http://pixijs.download/dev/docs/PIXI.ticker.Ticker.html Whats the difference between deltaTime and elapsedMS? Delta time seems to be a "Scalar time value" but I don't know what that is. Whereas in most other game engines, delta time is often the time in milliseconds from the previous frame (which is what elapsedMS seems to be doing here).
  7. ShotgunJed

    Can't prevent camera from being moved out of bounds

    Thanks for the insight guys. I managed to achieve this by panning the camera by modifying its "pivot" instead of its "position". I also had to divide the translation by the scale of the container so that it would work like before. But now I can clamp the pivot of the scene and essentially I can't drag my camera out of the bounds (which is what I want).
  8. I'm trying to make a camera and I made it work by using this code: // Setup stage.pivot.x = user.position.x; stage.pivot.y = user.position.y; stage.position.x = renderer.width/2; stage.position.y = renderer.height/2; // Moving stage.x += 5; // Change 5 to -5 when moving other direction stage.y += 5; Thing is, if I console.log the stage, and move the stage across my screen, the position 0,0 is nowhere to be found logically. i.e: I should expect 0,0 to be at the top left corner (when aligning the top left corner of the Container with the top-left corner of the browser) but it isn't. Its often somewhere random in the middle. By doing this: console.log('x:', scene.transform.localTransform.tx); console.log('y:', scene.transform.localTransform.ty); And moving my scene's top-left corner with the top-left corner of my browser, I get 0,0 which makes sense. So now I've been trying to put some sort of limit on these two localTransform variables but it isn't working. Is there a way to edit these?
  9. ShotgunJed

    Why is text not left aligned properly?

    Thanks. No wonder i was getting confused printing the Text.text. I fixed it by first building the complete string to some variable, then setting the Text.text to that variable.
  10. ShotgunJed

    Why is text not left aligned properly?

    What is causing this? Also when I set a Text's text to "" or '', if I print it, I get ' '. I also checked the code and I'm wondering why this space is added?
  11. ShotgunJed

    How to make text Right to left?

    Lets say you have some sort of leaderboards and you want to display the score. How would you do this so its like this: .....10682 ......9596 ......8671 ......8542 ......7520 ......6218 ......4211 ......4001 .......842 ........52 And not this (by default) 10682 9596 8671 8542 7520 6218 4211 4001 842 52 Note that I will also need to put some other things with each line, so it will look like this in the end: #1 Player 10682 #2 Bob 9596 #3 Eve 8671 #4 Foo 8542 ...
  12. How would one get the closest server to the user in HTML? For example, given three servers, US East, US West and Europe, if someone was in the UK, how would the server or client figure this out and "route" them to the EU server? (It doesn't need to actually route, I just need some variable e.g: bestServer = 'EU'). Also it doesn't have to be the closest server, it should be the one that gives the player the best performance. I am also using Node.js on my backend.
  13. ShotgunJed

    how to create a graphics timer like that?

    Maybe like this one? http://jsfiddle.net/popopome/asoyaqud/7/
  14. ShotgunJed

    How to display some html on top of pixi.js?

    Thank you. It works with position: absolute as well, so I'll use that. Also, how do you make it so that you can edit some input text that is on top of a pixi canvas? I am assuming that all of my keyboard inputs are being caught by the pixi canvas, so I cannot type anything in the input text. (I can however, right click on the input text and paste text). I also cannot open the console with Ctrl+Shift+I on Chrome. I have to click on the browser search bar and then press the keys to do so. edit: It was my code that listened to the arrow keys so that the player could be moved. Now I'm wondering if there is a way to be able to move with the arrow keys or WASD and be able to type in the HTML at the same time.