Exca

Members
  • Content count

    151
  • Joined

  • Last visited

About Exca

  • Rank
    Advanced Member

Recent Profile Visitors

1,828 profile views
  1. Exca

    How to handle WebGL poor performance

    Line like: <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimum-scale=1, width=device-width, height=device-height"> Which makes sure that the viewport on browser is using proper resolution & scaling.
  2. Exca

    How to handle WebGL poor performance

    Few methods I'm aware of: 1. Create a blacklist. Whenever device with poor performance is found. Add it to list. Very time consuming solution. 2. During gameplay detect fps and tell the player that low fps was detected, do you want to reload the page with canvas solution. Store the selection in localstorage / cookie / somewhere. 3. Have an initial rendering when user comes to page. Render something expensive for few seconds and measure fps. I have seen one solution which rendered basic quads and increased the number of renders until fps started to drop. Then compared that to baseline and changed rendering methods based on that. 4. Make sure viewports are set up so that slow devices dont render in their native resolution.
  3. Exca

    [help] Slot game - How to spin the reels

    I'd do that by keeping the container on place and tweening a "virtual" position for that reel. Then update the position of invidual symbols based on that position. Another option (if you want to move the whole container) would be to have two containers and move both of them, but have one of those be always above the first and then swap them when one gets hidden. That way you would have fixed order & continuous scrolling. It's a little bit more expensive method but works the same basically.
  4. Exca

    [help] Slot game - How to spin the reels

    The example does not use mask as it's not needed in that as it uses full screen area for reels. Adding a mask would be simple like: var g = new PIXI.Graphics(); g.beginFill(0,1); g.drawRect(0,0,maskWidth, maskHeight); g.endFill(); reelcontainer.addChild(g); reelcontainer.mask = g; Making the reels look more circular requires either a shader with somekind of distortion or a bit easier way would be just changing the y scale a bit depending on the symbol position. The proper way to handle easing is with tweening functions. You basically order the reels to move to certain position and instead of doing it with reelposition += fixed value you do it with a separate tweening function, which tells what the value should be at what time. I'd suggest using a tweening library to help with that. For example tweenjs, tweenlite, etc. can handle those.
  5. Exca

    [help] Problems rendering sprites

    In the initializeSymbolTextures function you are building 7 sprites and using those in the reels. What you should do is build textures in there and then generate sprites for each of the reel. Each instance of sprite is rendered in one place only. So basically in the initial configuration when you are adding sprites (rc.addChild(s_sprite)) you are moving the same sprites around from one container to another. You can fix this by changing the sprites to textures and then when initing a single reel just do s_sprite = new PIXI.Sprite(texture). So in short: Whenever you want to render a texture to multiple positions on screen, you need a sprite per position. Recycling same instance of sprite just means you are moving one sprite around the screen and it will be rendered only on its final location.
  6. Exca

    Making a balloon physics

    Here's few rough examples for each of the states. Balloons covering the whole screen (transition) b.scale.x = b.scale.y = 0; b.rotation = initial rotattion randomly; b.x = initial x position; b.y = initial y position; var delay = random delay for each ball; //Jump to view with scaling Tween.get(b.scale).wait(delay).to({x:1,y:1}, 750, Ease.getBackOut(0.8); //Small random movement Tween.get(b).to({ x: b.x + (Math.random()-0.5)*20, y:b.y+(Math.random()-0.5)*20, rotation:b.rotation+(Math.random()-0.5)*0.2}, 5000, Ease.quadInOut).to({x:b.x, y:b.x, rotation:b.rotation},5000, Ease.quadInOut); Balloons leaving from the transition screen var out = random point outside of the screen Tween.get(b).to({x:out.x}, 1000, random ease); Tween.get(b).to({y:out.y}, 1000, random ease); Tween.get(b.scale).to({x:0.5, y:0.5}, Ease.backOut,1000); These wont be flying back to screen, for that somekind of bezier curve solution might work better. For each tick update the rotation of the ball to align to current direction. (Math.atan2(dy,dx)) Ingame balloons initial appear b.y = corret position + screenHeight; //Or mask height Tween.get(b).to({y:correct position},1000, Ease.backOut); //Time here should be something related to dy. Tween.get(b.scale).wait(850).to({y:0.8}, Ease.backOut), 250).to({y:1}, 250, Ease.quadIn); //This will require tweaking. There's an additional sprite change in use also. The popping of balloons Tween.get(b.scale).to({x:1.2, y:1.2},150); In addition sprite animation is used.
  7. Exca

    Making a balloon physics

    Do you mean the animation that comes after stage is complete where balloons move around behind the level complete popup? Or the balls inside the game area? Or the balloons after you move tap move to next stage? For the game area balls it seems that it's a combination of tweening and sprite animation. For the balls moving behind the popup I'd say easiest would be to create somekind of fake physics that look real enough. For example give each ball an anchor and then apply some fake wind to it & negative gravity and then just on each tick calculate a position based on those values. For the ending balloons, those look like they have been done with tweening scale, rotation & position.
  8. Exca

    Responsive Pixijs

    Assuming you're talking about how the game view is handled and not for example interaction responsivines. I usually use a combination of these methods: - Locked aspect ratios. Build your game around a known aspect ratio (for example 16:9 (landscape) and 9:16 (portrait)). Then just scale the known area to fit to the screen and add some extra graphics to edges so there will be no black borders. - Dynamically positioned elements. Create somekind of logic for having your elements be completely dynamic in regards to where they are. Works great in games where ui is separate from the "action" area. - Fixed canvas and transform it to fit. This is the easiest way, build your game with a fixed canvas size and then just use css to fit it to given screen. An example of these would be a game where your character adventures in a world. You could have one container which has the actual world with player character and everything you interact with and that would be rendered so that you always see a predetermined amount of the world. Then on top of that you would have your UI with controls and other information. That would be rendered directly in relation to canvas size. Action buttons aligning to bottom right and movement to bottom left with health bar at the top. It could even have certain fixed minimum canvas size, after which a css scaling would be toggled on if screen was smaller than smallest configured resolution. Also remember to setup your viewport meta tag. More info on that can be found at pixi wiki (https://github.com/pixijs/pixi.js/wiki/v4-Gotchas) Responsive design is a really large field, so giving a single answer without knowing whatkind of project is being done is impossible. Hopefully some of those methods shown help.
  9. Exca

    Please help me with the memory leak bug

    Instead of generating new texture on each tick you should use single texture and redraw to that.
  10. Exca

    Renderer.resize doesn`t affect canvas children

    One thing that might help in real life is to add small delay after resize event. At least on some ios devices it might take up to 200ms for the window to give correct sizes (depends a bit on how your viewport metatag is set). Though on debugger that should not affect anything.
  11. Exca

    Pixi.js Showcase

    Made a game during EduGameJam2018 (educational game jam held during ITK conference in Finland). Goal is to combine ions to compounds by controlling an ion collector by tilting the phone. Play online at http://bit.ly/ion_in_a_jar Gameplay video:
  12. Exca

    Issue with context 2d

    After setting null you can force garbage collection from perfomance tab. Though I think that does not affect video memory. Not sure though.
  13. Exca

    Bullet go on mouse position

    I made an image of the maths related to this. Hopefully it helps.
  14. Exca

    Bullet go on mouse position

    Calculate a vector from player to target, then normalize it and then on each render pass just add the vector amount multiplied by speed to bullets position. Short pseudoexample: var bulletSpeed = 5; var bullets = []; function shoot(){ var direction = new Point(); direction.x = target.x - player.x; direction.y = target.y - player.y); //Normalize var length = Math.sqrt( direction.x*direction.x + direction.y*direction.y); direction.x/=length; direction.y/=length; var bullet = new Sprite(); bullet.direction = direction; bullets.push(bulllet); app.stage.addChild(bullet); } function animate(){ for( var i = 0; i < bullets.length; i++){ bullet.x += bullet.direction.x*bulletSpeed; bullet.y += bullet.direction.y*bulletSpeed; //Hit detection here } } I can make a proper example at some point if needed.
  15. Exca

    Stop TilingSprite at specific position

    I made an example of the method given above: http://pixijs.io/examples/#/demos/slots-demo.js