Search the Community

Showing results for tags 'pixijs'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 Game Coding
    • News
    • Game Showcase
    • Facebook Instant Games
    • Coding and Game Design
  • Frameworks
    • Phaser 3
    • Phaser 2
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Website URL





Found 177 results

  1. Ship wrecked Creatures! Save them all and collect as many stars! 250 exciting levels beautiful graphics 5 difficulty levels It works on all devices running IOS and Android fun music and voice creatures Many hours of gameplay LINK: For licensing to write to the email:
  2. I saw the playground on Pixi at I have learned that he is using typescript language and running on nodejs. Since I am not familiar with ts and nodejs, I can only access it through http://localhost:8080 after npm dev startup. Now I want to put him. Deployed to the web server on my window so that he can access it on the public network. May I do this?
  3. I am developing a game in which i have to click an image .after click it will flip and show prize after that i have to move this image and prize towards prize-board.during this movement i have to scale these images to fit into prize-board slot .how to solve this problem. please help
  4. Shahdee

    shareAsync errors

    Hey, guys! Did anybody experience this problem with shareAsync? Basically, it seems like shareAsync promise resolves too early and it also depends on a platform. Here is how it looks like in my code: case SHARE_ASYNC: if (p_param) { FBInstant .shareAsync( p_param ) .then( function() { console.log( "*** FBInstant.shareAsync() ok" ); if (p_callback) p_callback( null ); }) .catch(function( p_err ) { console.log( "*** FBInstant.shareAsync() failed: " ); console.log( p_err ); if (p_callback) p_callback( p_err ); }) } else { console.log( "***UPDATE_ASYNC: invalid parameter" ); } break; So, on: 1 On mobile I get *** FBInstant.shareAsync() ok whenever I tap on empty part of the screen in order to close native sharing dialog. 2 On PC I get *** FBInstant.shareAsync() ok whenever I click on Share button while native Fb dialog is being opened. Along with that, Fb throws some POST exceptions (screenshot is attached) I feel like instead, regardless of two cases, I should get *** FBInstant.shareAsync() ok whenever a user clicks Share button (in native window) and *** FBInstant.shareAsync() failed whenever he closes the native dialog. And, of course, no exceptions Any feedback is appreciated!
  5. Panagiotinos

    Pixijs Graphics DrawPolygon as Mask

    I am using PIXIJS Canvas Renderer and trying to apply a graphics polygon as mask in a sprite. When add graphics polygon as sprite.mask, i am getting blank canvas. Am i missing something or its just stupid idea? JSFiddle code:
  6. Hello, I am looking into game design, and decided to use the Pixi.js library for a project. The problem is that I am self-taught and unfamiliar with using Pixi. I am trying to resize a renderer created by the Pixi.autoDetectRenderer() method, but doing so messes up a simple background that I have loaded. I believe that the problem has to do with the order in which the program loads, because depending on how I open the website, the canvas may appear blank. When I attempt to load the website without resizing the canvas, the background loads well (when it loads at all). Any help would be appreciated. The small file containing my source code is attached. I apologize in advance for my ignorance! javascriptSrc.txt
  7. Hi Everybody, I'd like to use Spine in a Pixi project (either the latest v4 or directly starting with v5). I use webpack and npm and saw that Pixi his split pixi-spine into a different npm package. According to the readme of pixi-spine the runtime supports spine data from Spine version 3.5 up. But I only have a pretty old version of Spine 2.1.18 essential and don't want to buy a newer version at the moment because of financial reasons. I only use the basis spine stuff, so no deformations or other new (mesh-like) features. Could anybody please tell me why Pixi-spine only supports Spine 3.5 and up? Is it only because of the pro-features, or does it not work with spine 2.1.18 essential data either? Anybody knows what changed? Is it just some keynames in the spine json file, or only added (professional) stuff while the basic remained the same? Or is there more to it? And is there perhaps a version of pixi-spine out there that is able to import spine data from 2.1.18 essential while still using the latest v4 Pixijs (or v5)? Thanks a lot!
  8. Stephane

    Server side rendering?

    Hi ! I have a mobile game based on pixi.js+pixi-spine (let's call it the client). I also have a backend in node.js (let's call it the server). Now, I want to dynamically generate gifs from my spine characters and display/send them from server's side. I have 2 options: generate the gif files on the client, send them to the server store my spine assets on server, generate the gifs server side I'd prefer option 2, but rendering on an headless server seems to not be a straight road. I tried quickly node-pixi, just the require is complaining about window missing. Anybody has experience doing tis kind of server side rendering? Any suggestions?
  9. Kristiyan

    PIXI - many filters cause fps drop

    Hello everyone! I found that using filters to multiple sprites is causing frame drop(in my case 25 filters). After the frame is dropped, if i remove filters via console , the frame is again 59.9-60.0 . I will append image to show you what i mean.The way i append filter to sprite is in this way : var spritesLen = 25; for(var i=0;i<spritesLen;i++){ someSprite[i].filters = [myFilter] } I hope there is a fix to this issue :) Thanks.
  10. Hi, Can anyone tell me please what the best way to hide a "BETTING CONFIGURATION" container by clicking anywhere on the screen other than that container? Actually i'm detecting the mouse coordinates and comparing with the window / container coordinates, but it's good practice? public static isColliding(mouse: any, object: any): boolean { return !(mouse.x < object.x || mouse.x > (object.x + object.width) || mouse.y < object.y || mouse.y > (object.y + object.height)); } this.baseContainer.interactive = true; this.baseContainer.addListener('pointerdown', () => { if (Utils.isColliding(this.mouseCoord, betConfigUI)) { console.log('you are in window space'); } else { console.log('you are not in the window space'); } }) Thanks in advance!
  11. Hello, I have 2 questions regarding the optimization on Pixi.js On this page On the Sprite part it says: Use spritesheets where possible to minimize total textures Sprites can be batched with up to 16 different textures (dependent on hardware) I am not sure to understand perfectly the above statement. So for exemple let says I want to display 40 differents buildings on screen. In term of performance (rendering) would it be better to have a big PNG file with all those buildings inside (that I can use as Spritesheet) or have 40 png ? Also I created a fountain water particle using I have 2 foutains Sprite on my screen looking exactly the same with inside each, a Pixi.particles.Emitter for the water. Is there a way to have some kind of duplicate of the first fountain in order to have only one Pixi.particles.Emitter updating instead of 2. Thank you so much for your answers. Best
  12. SamYan

    Texture caching problem

    Hi, I'm trying to load 4 images, and then generate array of random sprites, but i get In chrome console: Debug: GET http://localhost:8081/dist/symbol_2 404 (Not Found) BaseTexture.js:795 BaseTexture added to the cache with an id [symbol_1] that already had an entry addToCache @ BaseTexture.js:795 fromLoader @ Texture.js:478 textureParser @ textureParser.js:9 (anonymous) @ Loader.js:614 (anonymous) @ async.js:35 Texture.js:508 Texture added to the cache with an id [symbol_1] that already had an entry addToCache @ Texture.js:508 fromLoader @ Texture.js:479 textureParser @ textureParser.js:9 (anonymous) @ Loader.js:614 (anonymous) @ async.js:35 BaseTexture.js:795 BaseTexture added to the cache with an id [symbol_2] that already had an entry addToCache @ BaseTexture.js:795 My snippet: import * as PIXI from 'pixi.js' const symbols = [ { id: 0, img: PIXI.Texture.fromImage("symbol_1") }, { id: 1, img: PIXI.Texture.fromImage("symbol_2") }, { id: 2, img: PIXI.Texture.fromImage("symbol_3") }, { id: 3, img: PIXI.Texture.fromImage("symbol_4") } ]; export default class Symbol { /** * Generate random symbol tables * * @static * @param {number} reelsCount * @param {number} symbolsCount * @param {(symbolTables: Array<any>) => void} resolve * @memberof Symbol */ public static generateSymbols(reelsCount: number, symbolsCount: number, resolve: (symbolTables: Array<any>) => void): void { let symbolTables: Array<any> = new Array<any>(); for (let i = 0; i < reelsCount; i++) { let symbolTable: Array<any> = new Array<any>(); for (let x = 0; x < symbolsCount; x++) { let randomIndex: number = Math.floor(Math.random() * symbols.length); let id: number = symbols[randomIndex].id; let sprite: PIXI.Sprite = new PIXI.Sprite(symbols[randomIndex].img); symbolTable.push({id: id, img: sprite}); } symbolTables.push(symbolTable); } resolve(symbolTables); } } So, what's the wrong ? It's caching problem or? Thanks in advance.
  13. SamYan

    Doubt Container

    Hi. I just started in Pixi js. Can someone explain to me if a container is used to create different levels of game? Thanks in advance
  14. Sphynxinator

    PIXI.js doesn't render my sprite.

    Hi all. My PIXI.js code doesn't render my sprite. What is the problem? I checked the all file directions and all of them are correct. I get just only black screen. Here is my code: let visibleObjects = []; let pixelDimensionWidth = 1.0; let pixelDimensionHeight = 1.0; let Sprite = PIXI.Sprite; let Application = PIXI.Application; let Rectangle = PIXI.Rectangle; let resources = PIXI.loader.resources; let loader = PIXI.loader; let player = {}; function getWidth() { if(mainContainer != null) { return mainContainer.offsetWidth; } else { return 0; } } function getHeight() { if(mainContainer != null) { return mainContainer.offsetWidth / 2; } else { return 0; } } function resizeCanvas() { if(app != null) { app.renderer.resize(getWidth(), getHeight()); pixelDimensionWidth = mainContainer.offsetWidth/100.0; pixelDimensionHeight = mainContainer.offsetHeight/100.0; } for(let i=0; i<visibleObjects.length; i++) { if(visibleObjects[i] != null) { if(visibleObjects[i].hasOwnProperty('xPercent') && visibleObjects[i].hasOwnProperty('sprite')) { visibleObjects[i].sprite.x = visibleObjects[i].xPercent * pixelDimensionWidth; } if(visibleObjects[i].hasOwnProperty('yPercent') && visibleObjects[i].hasOwnProperty('sprite')) { visibleObjects[i].sprite.y = visibleObjects[i].yPercent * pixelDimensionHeight; } if(visibleObjects[i].hasOwnProperty('widthPercent') && visibleObjects[i].hasOwnProperty('sprite')) { visibleObjects[i].sprite.width = visibleObjects[i].widthPercent * pixelDimensionWidth; } if(visibleObjects[i].hasOwnProperty('heightPercent') && visibleObjects[i].hasOwnProperty('sprite')) { visibleObjects[i].sprite.height = visibleObjects[i].heightPercent * pixelDimensionHeight; } } } } let mainContainer = document.getElementById('main-container'); let canvasContainer = document.getElementById('canvas-container'); let app = new Application({ width: getWidth(), height: getHeight(), antialias: false, resolution: 1, autoResize: true, }); canvasContainer.appendChild(app.view); window.addEventListener("resize", resizeCanvas); loader .add([ "images/games/test/objects.png", "images/games/test/buttons.png", "images/games/test/control.png", ]) .load(setup); function setup() { player = { id: "player", rectangle: new Rectangle(0, 1, 6, 6), texture: resources["images/games/test/objects.png"].texture, sprite: new Sprite(this.texture), xPercent: 50.0, yPercent: 50.0, widthPercent: 3.0, heightPercent: 6.0, }; player.texture.baseTexture.scaleMode = PIXI.SCALE_MODES.NEAREST; player.texture.frame = player.rectangle; visibleObjects.push(player); app.stage.addChild(player.sprite); resizeCanvas(); /*objectCoin = new Sprite(PIXI.loader.resources["/images/games/test/objects.png"].texture); buttonTouch = new Sprite(PIXI.loader.resources["/images/games/test/buttons.png"].texture); buttonKeyboard = new Sprite(PIXI.loader.resources["/images/games/test/buttons.png"].texture); controlLeft = new Sprite(PIXI.loader.resources["/images/games/test/control.png"].texture); controlRight = new Sprite(PIXI.loader.resources["/images/games/test/control.png"].texture); controlUp = new Sprite(PIXI.loader.resources["/images/games/test/control.png"].texture); controlDown = new Sprite(PIXI.loader.resources["/images/games/test/control.png"].texture);*/ } Thank you. I'm new to the forum by the way.
  15. This is my code right now to check if left or right mouse button is down: // Left button down app.stage.on("mousedown", function() { // code... }); // Right button down app.stage.on("rightdown", function() { // code... }); But it doesn't seems to be possible that both events happen at the same time. How would I check if both mouse buttons are pressed? Left and right.
  16. Hello everyone What is the most powerful and performance way to extends a PIXI class? Example from my side, I need the native PIXI.Container class but with more methods and properties, and here's how i proceed. PIXI.ContainerData = (function () { class ContainerData extends PIXI.Container { constructor() { super(); this.Sprites = {}; // others custom proprety for game obj }; get d() { return this.Sprites.d }; // return diffuse sprites get n() { return this.Sprites.n }; // return normals sprites //TODO: spine normal are arrays }; ContainerData.prototype.createJson = function(dataValues) { }; ContainerData.prototype.asignJson = function(dataValues) { }; //END return ContainerData; })(); I also know another way to extends functional prototyping. example: function ContainerData() {; this.initialize(); }; ContainerData.prototype = Object.create(PIXI.Container.prototype); ContainerData.prototype.constructor = ContainerData; ContainerData.prototype.initialize = function () { this.Sprites = {}; }; I wondering about the cleanest and most efficient techniques to properly extend a class pixi? But especially on the most optimal way, knowing that JS need scan all the prototypes from the bottom to the top! The first technique worries me a little because in my console, Is look like that all the prototypes are cloned by reference and duplicate! So, i am interested in different techniques and advice. I am therefore looking for the most equitable approach between performance (speed) but also the readability for debugging. Thanks in advance.
  17. Hi everyone, I'm just finish a simple game: QUE. Que's a lightweight game. Just tap and follow poses in your screen. Coding: HTML5/PIXIJS. Game: QUE - A simple tap style game with stick-man. Just tap and follow poses in your screen. Que's mean is stick-man in Vietnamese Screenshot: Fig1. Main menu when start Que Fig2. Playing que, just tap to change pose to stack screen pose que_s.mp4 Fig3. Video preview Platform: All platform build with pure Cordova (lightweight). I'll release all platform like: iOS, Window, Linux, Mac - Android: -Web: or Review: Welcome to you!
  18. vshalakbari

    Unable to decode image in IE

    On refreshing in internet explorer png images are not decoded and assets are not loaded. Only when tab is reloaded, it works in fresh tab for the first time. It happens in PIXI 4.5.1
  19. Hi Everybody, I'm posting to promote my new multiplayer puzzle game. It's made in html5 , pixijs,vuejs,cordova for mobile integration and nodejs to power backend apis. you can play it online starting from the website: (where you can find detailed rules and FAQs) or on your android device: Single player mode is made of packs of puzzles (colled tori) and provides realtime ranking for both single packs and overall results Multiplayer mode is made up of tournaments, hundreds daily, where you can play using virtual coins gained in unlocking singleplayer scenarios. here some screenshots collage: here you can see a trailer I hope to have some honest feedback thanks everybody!
  20. Hello Devs, I finally launched my first html5 mobile game for android Honeycombs is a classical match-3 game with a hexagonal field. Make as many points as possible in a given time. You can find it here: and this is how it looks like: I created it using plain Javascript and Pixi.js wrapped into a cocoon.js app. Cocoon.js is a cloud compiler that gives your game a huge performance boost and supports plugins like Ads and Google Play Highscores. You can read more about it here: Depending on Feedback I plan to add some more content. Because it is all html5 it of course it also runs nicely in the browser so I want to put it online somewhere later. Cheers
  21. Hi devs, I've been working on "Fold Wars" for past few months. I had posted link to some early builds on this forum before. Now the game is available on Kongregate to play. During the beta testing to Kongregate's K+ users, the response was very positive. The game is HTML5, written in typescript. Only dependency is pixi.js. Give it a shot and let me know your impressions. Link: Here's a screenshot
  22. forleafe

    Delta time is ruining my animations

    I'm making a game where the game loop's frame rate is controlled and kept consistent with: renderer.ticker.add(function(delta){ deltaGlobal = delta; state(); }); However because of this, it causes my sprite animations to skip frames and look extremely choppy and ugly. Does pixi have a built in way to handle this that I'm just not seeing? Or are we still forced to use external scripts like this: Obviously if there isn't a built in feature for animations to run smoothly while the framerate is being controlled with a delta, then that might be a pretty essential feature that should get added soon.
  23. mRax

    Export after resize...

    So, my code: // create app like new PIXI.Application({ width: 1024, height: 540, // ... // to do something // ... renderer.resize(4096,2056) // then replace textures to hi-res , etc // and try to get png file from canvas var data = renderer.extract.base64() and... data is 1024 x 540 ... How to get data with new (resized) resolutions? Tnx
  24. Hello. I tried to get a kind of focus helper with the mouse when the pointer rolls over an item. but i can get a good easing when the mouse are hover a element. I do not know if I explain myself well, but I will try. i use the pointerLock API. when the mouse icon get hover a new elements, i want to help the mouse to move to center of element. But without disturbing the control of the mouse. the idea is to create a focus helper to center the pointer on the elements when the mouse has a contact with the outlines. i try my best to make a codepen. for active the pointer lock, just click inside the blue square. if your move the mouse, your will see that the behavior is a little messy when the mouse flies over a white square. An idea on a good approach to create a similar system? Am using GSAP libs. thank a lot for help. my source code am trying patch look like this , but it very similar to the code pen demo. /*: // PLUGIN □────────────────────────────────□MOUSE INTERACTIVITY□───────────────────────────────┐ * @author □ Jonathan Lepage (dimisterjon),(jonforum) * @plugindesc MOUSE ENGINE * V.0.1a * License:© M.I.T └───────────────────────────────────────────────────────────────────────────────────────────────────┘ Controle tous ce qui est associer a la sourits, interaction avec player et camera engine Initialise avantr le loader , seulement pendant la sceneBOOT */ // ┌-----------------------------------------------------------------------------┐ // GLOBAL $mouse CLASS: _mouse //└------------------------------------------------------------------------------┘ function _mouse() {; }; _mouse.prototype = Object.create(PIXI.Container.prototype); _mouse.prototype.constructor = _mouse; $mouse = new _mouse(); console.log9('$mouse: ', $mouse); //$mouse.initialize() _mouse.prototype.initialize = function() { this.icon = null; this.x = this.y = 0; // mouse coor this.sensiX = this.sensiY = 0.8; this.dirH = this.dirV = 0; // direction hori, vert (4,6,2,8) base 10 this.screenX = 1600; this.screenY = 900; this.mouseIsDown = false; // mosue is down indicator // check if started path selector this.tweenLastCase = null; this.startedPathCase = null; // easing mouse this.tween = new TweenLite(this.position, 0, { x:0, y:0, ease:Power4.easeOut, }); this.createSpriteMouse(); this.createListener(); //this.debug(); // FIXME: REMOVE }; //┌-----------------------------------------------------------------------------┐ // $mouse.createSpriteMouse(); // create the sprite spine mouse and default animations //└-----------------------------------------------------------------------------┘ _mouse.prototype.createSpriteMouse = function() { const sprite = new PIXI.Sprite.fromImage('/img/mouse.png'); sprite.anchor.set(0.5,0); this.icon = sprite; this.iconLight = new PIXI.lights.PointLight(0xffffff,0.5); // the sceen FX sun this.addChild(sprite,this.iconLight); }; //┌-----------------------------------------------------------------------------┐ // $mouse.initialise(); // initialise mouse grafivs and all listener //└-----------------------------------------------------------------------------┘ _mouse.prototype.createListener = function() { // mouse listener document.addEventListener('mousemove', this.mousemove_core.bind(this)); document.addEventListener('mousedown', this.mousedown_core.bind(this)); document.addEventListener('mouseup', this.mouseup_core.bind(this)); document.addEventListener('wheel', this.wheel_core.bind(this)); // frames window listener //document.body.onwebkitfullscreenchange = this.windowResized; // FIXME: F4 FULL SCREEN VOIR LA REQUETE FAITE PAR RMMV document.body.onresize = this.windowResized; document.body.onblur = this.windowBlur; document.body.onfocus = this.windowFocus; }; //┌-----------------------------------------------------------------------------┐ // event: windowResized, _mouseblur, _mousefocus // listener related to fullScreenManager and the API pointer lock //└-----------------------------------------------------------------------------┘ _mouse.prototype.windowResized = function(event){ document.exitPointerLock(); document.body.requestPointerLock(); // pointlocker API }; _mouse.prototype.windowBlur = function(event){ document.exitPointerLock(); }; _mouse.prototype.windowFocus = function(event){ document.exitPointerLock(); document.body.requestPointerLock(); // pointlocker API }; //┌-----------------------------------------------------------------------------┐ // event: _mousemousemove // event that compute the current mouse position and move the icon //└-----------------------------------------------------------------------------┘ _mouse.prototype.mousemove_core = function(event){ // determine the direction this.dirH = event.movementX>0 && 6 || event.movementX<0 && 4 || 0; this.dirV = event.movementY>0 && 2 || event.movementY<0 && 8 || 0; this.x+=(event.movementX*this.sensiX); this.y+=(event.movementY*this.sensiY); // overScreen reasigment position this.checkOverScreen(); // check camera !this.mouseIsDown && $camera.onMouseMove(this.x,this.y); // check cases const inCase = $cases.onMouseMove(this.x,this.y, this.mouseIsDown); if(inCase && this.tweenLastCase !== inCase){ this.tweenLastCase = inCase; this.moveToCase(inCase,0.5) } console.log('inCase: ', inCase); if(this.startedPathCase && this.mouseIsDown){ this.computePath(); } }; _mouse.prototype.checkOverScreen = function(){ if(this.x>this.screenX){ if(this.dirH === 4){ return this.x = this.screenX; }; }else if(this.x<0){ if(this.dirH === 6){ return this.x = 0; }; }else if(this.y>this.screenY){ if(this.dirV === 8){ return this.y = this.screenY; }; }else if(this.y<0){ if(this.dirV === 2){ return this.y = 0; }; }; }; // $camera.moveToTarget(); _mouse.prototype.moveToCase = function(inCase, speed,ease) { console.log1('inCase: ', inCase.getGlobalPosition()); const p = inCase.getGlobalPosition() this.tween.vars.x = p.x; this.tween.vars.y = p.y+(inCase.heigth/2); speed && (this.tween._duration = speed); this.tween.invalidate();; console.log('this.tween: ', this.tween); }; _mouse.prototype.computePath = function(){ if($cases.current){ // if case not exist in array, add it if(this.startedPathCase.indexOf($cases.current)<0){ this.startedPathCase.push($cases.current); } } }; //┌-----------------------------------------------------------------------------┐ // event: mousedown_core // event when mouse down //└-----------------------------------------------------------------------------┘ _mouse.prototype.mousedown_core = function(event){ this.mouseIsDown = true; if($cases.current){ this.startedPathCase = [$cases.current]; $cases.onMousedown(); } }; //┌-----------------------------------------------------------------------------┐ // event: mousedown_core // event when mouse down //└-----------------------------------------------------------------------------┘ _mouse.prototype.mouseup_core = function(event){ this.mouseIsDown = false; if(this.startedPathCase){ $player.moveToCase(this.startedPathCase[this.startedPathCase.length-1]); this.startedPathCase = null; $camera.onMouseWheel(1); } }; //┌-----------------------------------------------------------------------------┐ // event: wheel_core // event when mouse whell //└-----------------------------------------------------------------------------┘ _mouse.prototype.wheel_core = function(event){ // allow to add what need, example if on element do other thing than zoom .. $camera.onMouseWheel(event.deltaY<0 && 0.2 || -0.2); }; //$mouse.debug(); // add debug feature mouse mouve //TODO: REMOVE ME _mouse.prototype.debug = function(){ var debugMouse = this._mousemousemove; // (dX: ${~~(mX/Zoom.x)+ScrollX} this._mousemousemove = function(event) {,event); document.title = ` x: ${~~this.x} y: ${~~this.y} || mapX: ${ (this.x/$camera.zoom.x)+$camera.position.x } mapY: ${ (this.y/$camera.zoom.y)+$camera.position.y } || `; }; document.onmousemove = this._mousemousemove.bind(this); };
  25. newbie1377

    Making a balloon physics

    Hello guys, Need some help with creating a custom animation (currently using Tween.js, you can suggest any) that reproduces balloon physics, exactly like in the video ( Watch please in 0.25x speed in order to deeply understand its behavior. Is it possible to make such an animation with only one sprite(one png image of a balloon, don't consider a bird inside right now) or should it be done via changing textures overtime (i.e. condition, when "top" point of texture "touches" top of container)? If it's possible, can you please suggest solution or any literature (video, text, whatever) which can help me with my case? Thanks!