Jump to content


  • Content Count

  • Joined

  • Last visited

About batman

  • Rank

Recent Profile Visitors

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

  1. batman


    Guys, hi, spent couple hours to figure out how to combine local and global coordinates. The issue: I have a stage, there is a gameboadr on this stage, the gameboard holds many elements with coordinates related to this gameboard. Then I add element on game stage. It is animated effect. So when I click on element on the gameboard. It passes itself as parametr to that animation and trigger it. But, animation is displayed in a wrong place (it just need to be on the stage, not on gameboard). What I try to do is simply display that effect on top of the element. The gameboard scale is 0.5, the
  2. Guys, thanks for suggestions. It seems that it is kind of side effect on calling these three functions on the same event. The order is: window.addEventListener('resize', function resizeEvent() { fitGameToScreen(GAME.app.view); scaleObject(bg); reposition(bg); }); will double chek
  3. Ivan, please check below: I try to create universal scaling/positioning function. So my game displays properly on browsers and mobiles. Decomposition is the following: Create canvas so it fit all screens (done). Canvas will have general UI is kept on all stages (like health, score etc). Simply done like this: function fitGameToScreen(canvas) { let newWidth = window.innerWidth; let newHeight = window.innerHeight; if (isMobile()) { newWidth = screen.availWidth; newHeight = screen.availHeight; } document.body.style.overflow = "hidden" /
  4. Ivan, thanks. But setting only "autoResize: true", unfortunately do nothing (if I understand you right). Does it works standalone? Or I have to set it to true then I can use renderer.resize() (it actually works fine without autoResize: true). So quite unclear. BTW: found some usefull articles, could help somebody: https://webglfundamentals.org/webgl/lessons/webgl-resizing-the-canvas.html http://www.williammalone.com/articles/html5-game-scaling/
  5. Guys, hello, Hope you are well. Could you advise why this: renderer.view.style.width = newWidth + "px"; renderer.view.style.height = newHeight + "px"; dynamically resize everyhting inside the app.renderer.view (our canvas), but this one, doesn`t: renderer.resize(newWidth, newHeight); I see how canvas expands/contacts but can`t get why background picture in first case follow the canvas but in second case stay the same. Thank you in advance,
  6. Thanks guys. Indeed TilingSprite was partial solution. Both aproaches looks good. Experimenting with it now. One more thanks
  7. Ivan thanks for reply. Sorry maybe wasn`t clear and the question is not about employment. I think it is quite easy to solve in .Net. I was asking what kind of approach of Pixi.js (members/methods/correct usage) I can use. Please check one more time: Can I set number of cycles for TilingSprite? I checked the docs and it seemed no, but maybe there are some useful hacks. // The question is about cycles of TilingSprite, can we control them? How I can stop TilingSprite at specific predefined position? I think about manual coordinates calculation. But how to map icon on TilingSprite
  8. Hi everyone, I made a slot machine with three reels. And faced with "spinning reel problem". There are many articles on this issue. I think I am quite close to the solution but bumped into the wall with stopping TilingSprite on specific position. It is quite the same issue as below but with pixi.js. My evolution of "reels spinning" was the following (if not interested please go to point 4 with questions): I pushed my slot icons (sprites) into array, and displayed on three rectangles (reels, drawn with Pixi.Graphics.). On pushing spin button I shuffled the arrays and
  9. Exca, thanks for reply. But is there any chance to show full example?
  10. Hi everyone, I checked many articles about this topic. All what I tried didn`t work for me. But unfortunately there is no clear vision what are the steps to make your custom designed (from your png or cur file) cursor view. Just simply change from default one (white arrow) to my own. The questions are the follows: What kind of variables I should declare? Where in the code I should declare them (like global, or in setup function, or update function)? Examples: Complete code to use cursor defined in CSS file? ( example of css, and js file). Nothing else, j
  11. Hi everyone, Could anyone advise with the following: i have a stage with some buildings (each is a separate sprite, combined in one class). All objects are interactive (I can click on them). I have video effects in mp4 format. What i am trying to do is when i click on building it transforms to next level of building and changes. It seems just to set visibility to false of one sprite and true to another. But while it is transforming/changing I would like to insert video effect (it shows tools spinning around and dust). So it smoothly changes initial state -> video effect -> transf
  12. Thanks for promt reply, it helped. Declared it as global and put id= PIXI.loader.resources ["assets/images/sprites.json"].textures; inside setup function
  13. Hi, everyone. Could you advise how correctly pass id of image form atlas when you create class? Thank you in advance, My class code: var id= PIXI.loader.resources ["assets/images/sprites.json"].textures; function Tower() { //var towerTexture = TextureCache["Tower_1.png"]//PIXI.Texture.fromImage() // this one works fine PIXI.Sprite.call(this, id["Tower_1.png"]); // when i use like this i got error that Cannot read property 'Tower_1.png' of undefined this.x = 20; this.y = 20; } Tower.prototype = Obje
  • Create New...