batman

Members
  • Content count

    17
  • Joined

  • Last visited

About batman

  • Rank
    Member

Recent Profile Visitors

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

  1. batman

    Coordinates

    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 element is scaled to 0.9, the effect scale is 1, the anchor for all objects is 0.5. The relation as follows: app.view (pixi app/canvas)->> Game.stage (where effect is placed) ->>Gameboard->> Elements I did as follows: Animations.rocketRun = function (elementOnBoard) { let frames = []; for (let i = 0; i < 25; ++i) { frames.push(PIXI.Texture.fromImage(picture_' + i + '.png')); } let anim = new PIXI.extras.AnimatedSprite(frames); //anim is my effect should be put on top of elementOnBoard,so actually cover it, only of X axis //anim.x = -319 + CELL_SIZE + SPACE; manual calculation, bad approach //anim.x = Game.stage.toGlobal(elementOnBoard.position).x;// wrong //anim.x = Game.stage.board.toGlobal(elementOnBoard.position).x;//wrong //anim.x = elementOnBoard.parent.toGlobal(elementOnBoard.position).x); //like on tutorial, but got Cannot read property 'toGlobal' of null, on tutorial is says: "And it will work even if you don't know what the cat's parent container currently is." anim.x = elementOnBoard.getGlobalPosition().x; // finally supposed to be the best one, but... Game.stage.addChild(anim); anim.anchor.set(0.5); anim.animationSpeed = 0.1; anim.loop = false; anim.play(); }; P.S. I found a solution during making this post. The problem was, I think scale. I simply adjusted the coordinates calculation of my effect as below (multiply on scale, and deducted one of my constant - manual adjusment points). Indeed there is some inaccuracy, not sure why, but I adjusted by adding custom number. Could you explain why? Thanks, anim.x = elementOnBoard.getGlobalPosition().x * 0.5 - SPACE-19;
  2. batman

    Renderer.resize doesn`t affect canvas children

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

    Renderer.resize doesn`t affect canvas children

    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" // to remove scroll in some cases document.body.style.width = newWidth + "px"; document.body.style.height = newHeight + "px"; GAME.app.renderer.resize(newWidth, newHeight); window.scrollTo(0, 0); } Second step is to create stage. It holds all game interaction (but not UI elemetns, which are sticked to canvas separately). This one is to be scaled, done like this: function scaleObject(myElement) { // background for the stage //calculate aspect ratio let ratio = GAME.size.width / GAME.size.height; let newWidth = window.innerWidth; let newHeight = window.innerHeight; let newScale; if (isMobile()) { newWidth = screen.availWidth; newHeight = screen.availHeight; } if (newWidth > newHeight) {// check for orientation newScale = newWidth / GAME.size.width; } else { // newScale = newHeight / GAME.size.height; newScale = newWidth / GAME.size.width; } myElement.scale.set(newScale); } And position it in the middle of the screen (anchor is set to 0.5), like this: function reposition(myElement) { var newWidth = window.innerWidth; var newHeight = window.innerHeight; if (isMobile()) { newWidth = screen.availWidth; newHeight = screen.availHeight; console.log("mobile"); } // checks if passed element is a sprite and has x,y properties if ((myElement instanceof PIXI.Sprite) && "x" in myElement && "y" in myElement) { myElement.x = newWidth / 2; myElement.y = newHeight / 2; } else { console.log("passed Element is not PIXI.Spite instance"); } } So in common it works fine. While simulating mobile devices in chrome, also works fine except for (and it does have the same look on mobiles devices) when i do "Responsive" transformation, there are some poisitions where part of the "stage" is below the screen, and scroll appears. But when I trigger couple times rotate (see pictures) it dispays properly (in the middle of the screen and scaled). I checked http://www.williammalone.com/articles/html5-game-scaling/ , but didn`t work as I expected. next step would be affine transformation of elements on the stage when orientation is changed.
  4. batman

    Renderer.resize doesn`t affect canvas children

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

    Stop TilingSprite at specific position

    Thanks Exca. Looks pretty cool)
  7. batman

    Stop TilingSprite at specific position

    Thanks guys. Indeed TilingSprite was partial solution. Both aproaches looks good. Experimenting with it now. One more thanks
  8. batman

    Stop TilingSprite at specific position

    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 to predefined position on slot (like bottom, middle, top). // The obvious one is to addChild on top of TillingSpriteLike this: this.tilingReelThree.addChild(this.reelThree[0], this.reelThree[2], this.reelThree[1], this.reelThree[4], this.reelThree[3]); but in this case I can`t see added elements. So can I addChild on TilingSprite so it "rotates" with it. Or I just missed something, and it should works fine. Can I set "distance" of TilingSpite go/cycle? Close to the first question. From my example I come up with "time" distance. // the same as first one I tried to get this kind effect with grouping items into container and moved it (try to make it work now) but can`t get an effect as going out of visible area and immidiately appear from opposite side (like TilingSprite). Maybe some advise here? // This one is actually could be treated as give me done solution, but just in case to save time, if there are a good hacks. One more time, my issues is not logic, it is actually correct usage of Pixi.js to reach appropriate effect. Thanks,
  9. 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 display them again. I got randomness dsiplaying but no spinning animation. So tried next step -> Try to make spinning effect with Tween.js. But as I treated every slot icon as single element, there were issues with spinning syncronizations and move directions. I believe with some advanced logic I can reach "spinning effect" here, but decided to find more simple solution -> Here I come of with combining all reel icons into one rectangle (each element is array element which contain icon sprite (like apple etc)): this.rectangleReelThree.addChild(this.reelThree[0], this.reelThree[2], this.reelThree[1], this.reelThree[4], this.reelThree[3]); then, creating TilingSprite from this rectangle, and positioning it: this.tilingReelThree = PIXI.extras.TilingSprite.from(app.renderer.generateTexture(this.rectangleReelThree), this.rectangleReelThree.width, this.rectangleReelThree.height) this.tilingReelThree.position.set(363, 210); this.tilingReelThree.tilePosition.set(this.rectangleReelThree.position.x, this.rectangleReelThree.position.y); of course added it to the stage, then actually an issue. I came up with the following variables to control spinning: this.y_3; // this one to pass value for moving sprite on y axis this.distance_3; // number to count down from, as soon as it reaches 0, this.y_3 -- 0, and spinning stops. realization is the following: var position = function () { // this function is called from update() main animating function if (this.y == 0) { } else { this.tilingReelOne.tilePosition.y += this.y_1 * 12; this.tilingReelTwo.tilePosition.y += this.y_2 * 13; this.tilingReelThree.tilePosition.y += this.y_3 * 14; } this.distance_1--; this.distance_2--; this.distance_3--; if (this.distance_1 <= 0) this.y_1 = 0; if (this.distance_2 <= 0) this.y_2 = 0; if (this.distance_3 <= 0) this.y_3 = 0; }; //this one is trigerred on Spin button push var spin = function () { this.state = SLOT_STATE.SPINNING; this.y_1 = 1; this.y_2 = 1; this.y_3 = 1; this.distance_1 = 150; this.distance_2 = 220; this.distance_3 = 275; }; As result I got nice reels spin, but they stop on different positions (not in line, or fixed position). Also from this point I can`t check if reels combination meet neither win nor lose combintaion, as TilingSprite treated as one whole object. So here are the questions: Can I set number of cycles for TilingSprite? I checked the docs and it seemed no, but maybe there are some useful hacks. How I can stop TilingSprite at specific predefined position? I think about manual coordinates calculation. But how to map icon on TilingSprite to predefined position on slot (like bottom, middle, top). Can I set "distance" of TilingSpite go/cycle? Close to the first question. From my example I come up with "time" distance. I tried to get this kind effect with grouping items into container and moved it (try to make it work now) but can`t get an effect as going out of visible area and immidiately appear from opposite side (like TilingSprite). Maybe some advise here? Thank you in advance,
  10. batman

    Change cursor view in PIXI.js

    Exca, thanks, exactly what was needed
  11. batman

    Change cursor view in PIXI.js

    Exca, thanks for reply. But is there any chance to show full example?
  12. batman

    Change cursor view in PIXI.js

    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, just using cursor style defined in CSS. Complete code of defining your own cursor in js file (pixi application). Nothing else, just using my own cursor style (png, cur) in PIXI application. Any other solution. I think replies on these questions will shed the light on this mysterious topic. What I checked: And finally this one: https://github.com/pixijs/pixi.js/issues/4238 + some minors Thank you in advance,
  13. 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 -> transformed building. - How can I insert video efect to the stage so it smoothly injected to the stage (no need of rectangle borders, kind of like png but video (hope you can see my point)? Thank you in advance,
  14. Thanks for promt reply, it helped. Declared it as global and put id= PIXI.loader.resources ["assets/images/sprites.json"].textures; inside setup function
  15. 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 = Object.create(PIXI.Sprite.prototype); And of course loader from main: loader .add("assets/images/tower/sprites.json") .load(setup);