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 161 results

  1. Vishal Akbari

    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
  2. 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!
  3. 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
  4. 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
  5. 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.
  6. 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
  7. 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); };
  8. 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!
  9. I've created a new plugin for Pixi.js for rendering vector art called the pixi-omber-gltf2-vector plugin. To use it, you first export your vector art as 3d meshes in glTF 2.0 format. The plugin can then quickly render those meshes on-screen using WebGL. It has a number of advantages: Vector art results in smaller file sizes for large assets that makes use of transparency. I hope to later add support Draco mesh compression, which should make vector art competitive even for smaller-sized art. You can render on high resolution displays with no loss of detail You don't need to deal with making sure art assets fit within a multiple of 2 texture size or anything. Make your art any size and scale it to what you need This isn't your parent's vector graphics either: It's optimized for rendering using modern 3d graphics hardware. Everything ends up as 3d meshes that can be blasted to the screen quickly You can make use of advanced gradient features that let you make better looking art with more natural shading. You aren't limited to flat shading or boring linear gradients. Let me know what you think!
  10. So I'm having a bit of a rough time doing something that seems kinda basic. I've tried doing a lot of research, but I'm really kinda stuck on the higherarchy pixi uses to create vector images. I'm creating vector based UI for my game, and to do this, I need to make a square frame (like a picture frame with the center open); and then rotate said square 90 degrees so it's standing on one of its points like a diamond. Basically, my UI is going to be composed of a bunch of these square diamond icons. Thanks
  11. m.recupero

    pixijs, how to distribute it?

    hi everybody, I'm developing a browser game with pixijs, I have finished 90%. My problem is: as I distribute the game in the Apple Store or google play market. In this forum, I read that you use cocoonjs, but I don't want use it, because I have to change many things in the project (for example: canvas render, google font, etc...) My game runs fine in chrome and firefox browsers (mobile and desktop) at 60 FPS. I tried to compile the project with apache cordova (PhoneGap), but it run at 12 FPS. This my question on stackoverflow: I can not compile project with another embedded webview in phonegap, because it is very difficult, there is no documentation and is still unstable!! chrmome webview for phonegap: Firefox webview for phonegap: Any idea? Please give me some advice...sorry form my english. Marco.
  12. josescxavier

    New set texture doesn't show up

    Hi, I'm having a problem after setting a texture. It doesn't show up. It only show the new texture after modify it. Here is the code where I create the objects: this.pixicanvas = new PIXI.Application({width: 600, height: 800}); this.rx_image = null; this.zoom_min = 1; this.aim_tmp = 0; this.state = { pixi_height: 0, pixi_width: 0, }; this.handleZoom = this.handleZoom.bind(this); this.rx_image = new PIXI.Sprite(PIXI.Texture.EMPTY); this.container_points = new PIXI.Container(); Here where I update the texture: updateRxSprite(new_img){ PIXI.loader.reset(); PIXI.loader.add('resource-key', new_img).load( (loader, resources) => { this.rx_image.texture = PIXI.Texture.fromImage('resource-key'); var scale = 1; var scale_screen = this.pixicanvas.screen.width; var scale_rx_image = this.rx_image.width; var aspect_ratio_sprite = this.rx_image.width/this.rx_image.height; var aspect_ratio_screen = this.pixicanvas.screen.width/this.pixicanvas.screen.height; if(aspect_ratio_sprite<=aspect_ratio_screen){ scale_screen = this.pixicanvas.screen.height; scale_rx_image = this.rx_image.height; } if(scale_screen > 0 && scale_rx_image > 0){ scale = scale_screen / scale_rx_image; } this.rx_image.scale.x = scale; this.rx_image.scale.y = scale; this.zoom_min = scale; this.rx_image.x = (this.pixicanvas.screen.width-this.rx_image.width)/2; this.rx_image.y = (this.pixicanvas.screen.height-this.rx_image.height)/2; this.rx_image.on('pointerdown', this.props.onClick); this.d3zoom_element.on(".zoom", null); this.d3zoom_behavior = D3ZOOM.zoom().scaleExtent([this.zoom_min, 5]).on("zoom", this.handleZoom);; var new_transform = D3ZOOM.zoomIdentity; new_transform.k = this.rx_image.scale.x; new_transform.x = this.rx_image.position.x; new_transform.y = this.rx_image.position.y;, new_transform); }); } After this code the new texture isn't showed up until I modify it, per example, set a new position to sprite. Before it stopped work I added the sprite to stage after set the new texture. Now because I need the sprite on a specific Z order I added the sprite with a EMPTY texture and only set the new texture after the user upload it. What I'm doing wrong?
  13. jollibee

    Pause render in pixijs

    The webivew which use pixijs will crash on iOS when the app goes background, something like: _gpus_ReturnNotPermittedKillClient. So, we have to pause the webgl render. There is lockRender in Phaser. Is there a similar method in Pixijs to pause renderer? Thank you. updateRender: function (elapsedTime) { if (this.lockRender) { return; } // ... }
  14. Hi, I've made a little game in my spare time called hostile shapes. Its my first time using PixiJs, which i now think is awesome. Very easy to learn with lots of helpful docs and examples. Link note: Androids will get re-directed to a version in the play store built on Cordova. i had a nightmare with web view performance so had to use crosswalk. Hope you Enjoy! Rob
  15. No matter what I try or how I implement things, I keep getting some jittery scroll movement. I was using the <canvas> tag before this, without PixiJS and it was a lot of jittery movement. Just one drawImage call per rAF-call would take far more than 16,6 ms. I used the <canvas> for drawing frames. But I also used the transform CSS property for instance. With and without CSS transitions. But currently I'm using PixiJS with a RenderTexture and the scrolling still seems somewhat jittery to me, though maybe less jittery. I'm not drawing vector graphics. I'm drawing images (PNG files actually). When an image has loaded I add it to a somewhat large RenderTexture (4096x4096). Because width of the images don't exceed 1024 pixels, I now store the images inside four columns of 1024 by 4096 pixels. I then have a sprite for which I create a Texture (which I recently found out to be just a reference to a BaseTexture combined with a certain frame). Each time I scroll I create a new Texture pointing to the same RenderTexture but using a different frame. Though at a certain point it seems I need two sprites with textures both pointing to the same RenderTexture but with different frames. Because, let's say, when the first frame starts at 4000 and I need about 800 pixels from the image (e.g. 800 could be window height or screen height) I need to have a frame pointing at the last 96 pixels of the first column within the RenderTexture and a frame which points to the other column, getting the remaining 704 pixels. Should this be a proper way of handling this? Or is there a faster way to handle this somehow? Maybe I could make sure to make the height of the columns within the RenderTexture are dividable by the current window height. Though then it would mean some column height would go unused (but then this would probably be true for all columns, so maybe not such of a big deal). And this reordering would then need to happen each time a resize occurs. I guess a large screen size (regarding height) would not work very well with how I'm handling this now? Any advice would be much appreciated By the way, I'm also using a small easing function which I call via setTimeout when there is movement. But the actual drawing takes place currently in the ticker function. It just calculates current scrolling speed, does not draw anything.
  16. Hi guys, I think I have problem how masking in PIXIjs works. I have this image of black horse And I would like to use masking in order to give it the color. Here is my code so far: const app = new PIXI.Application({backgroundColor: 0xFFFFFF}) document.body.appendChild(app.view) PIXI.loader.add('assets/horse.png').load(() => { const horse_sprite = new PIXI.Sprite(PIXI.loader.resources['assets/horse.png'].texture) const horse_mask = new PIXI.Graphics() horse_square.beginFill(0xFFaaFF) horse_square.drawRect(0, 0, 130, 130) horse_square.endFill() horse_mask.mask = horse // I can see the horse and the square if I comment this out app.stage.addChild(horse_mask) app.stage.addChild(horse_sprite) }) It's not working, I can't see anything, not a horse nor the square. Thanks
  17. Hi, I'm trying to implement the pixi-v4 filters in phaser 2 (CE Version). I'm especially interested in this one: I've noticed this example ( in phaser 2 is outdated/not working (link to pixi filter is wrong). Even when i fix the link (e.g. the filter gives an error because pixi is not included. So I'm wondering what is the right method to do it. I guess the main questions here are: is pixi-v4 filters compatible with phaser-v2 method of importing of pixi filters? if yes, where are the new filters (interested in the zoom-blur one: if not, any pointers how to port them? Thanks!
  18. Alekz Force

    AnimatedSprite does not play

    I'm new to Pixi.js I did a code to make a simple 3 frame animatedSprite but it never leaves the first frame, if I do a gotoAndPlay(1) it goes to the desired frame and stops, and if I console.log the ticker it keeps on the frame as it were stopped but the playing property is true. Can't find the error anywhere. Somebody could help me out here? The code is below: var w = window.innerWidth, h = window.innerHeight, objs = {}, tex = {}, anim = {}, prop = w/16, props = { grass: [2060, 745, 16], trave: [1334, 471, 10], rede: [1309, 454, 9.8] }; var app = new PIXI.Application(w, h, {backgroundColor: 0x33aaff}); app.renderer.autoResize = true; resizeAll(); $('#div_canvas').append(app.view); objs['message'] = new PIXI.Text( "Carregando...", {fontFamily: "Arial", fontSize: 20, fill: "white"} ); objs['message'].position.set((app.screen.width/2)-(objs['message'].width/2), (app.screen.height/2)-(objs['message'].height/2)); app.stage.addChild(objs['message']); app.loader .add('css/fonts/Quantico-Regular.otf') .add('img/grass.png') .add('img/trave.png') .add('img/rede.json') .on("progress", loadProgressHandler) .load(onAssetsLoaded); function loadProgressHandler(loader, resource){ objs['message'].text = "Carregando..."+(Math.round(loader.progress*100)/100)+"%"; objs['message'].position.set((app.screen.width/2)-(objs['message'].width/2), (app.screen.height/2)-(objs['message'].height/2)); app.renderer.render(app.stage); } function onAssetsLoaded() { app.stage.removeChild(objs.message); delete objs.message; tex['grass'] = app.loader.resources["img/grass.png"].texture; tex['trave'] = app.loader.resources["img/trave.png"].texture; tex['rede'] = app.loader.resources["img/rede.json"].textures; anim['rede'] = []; for(var i=0; i<3; i++){ anim['rede'].push(tex['rede']['rede0'+i+'.png']); } console.log(anim.rede); objs['grass'] = new PIXI.Sprite(tex['grass']); objs['grass'].anchor.set(0.5, 0.0); objs['grass'].position.set(app.screen.width/2, app.screen.height/2); objs['trave'] = new PIXI.Sprite(tex['trave']); objs['trave'].anchor.set(0.5, 0.8); objs['trave'].position.set(app.screen.width/2, app.screen.height/2); objs['rede'] = new PIXI.extras.AnimatedSprite(anim.rede); objs['rede'].anchor.set(0.5, 0.8); objs['rede'].position.set(app.screen.width/2, app.screen.height/2); objs['rede'].animationSpeed = 1; objs['rede'].play(); resizeAll(); app.stage.addChild(objs['grass']); app.stage.addChild(objs['rede']); app.stage.addChild(objs['trave']); app.ticker.add(function() { console.log(objs['rede'].totalFrames, objs['rede'].currentFrame); }); } function resizeAll(){ var propW = w/16; var propH = h/9; if(propW>propH){ w = propH * 16; }else if(propW<propH){ h = propW * 9; } prop = w/16; for(var i in objs){ if(typeof props[i] !== 'undefined'){ objs[i].width = props[i][2]*prop; objs[i].height = (objs[i].width/props[i][0])*props[i][1]; } } app.renderer.resize(w, h); }
  19. Greetings, I'm excited to share prototype of my 2D Tower Defense game Fold Wars. You can play it on itch now. It uses Pixi.js for rendering. Written in Typescript. Artwork in Inkscape. Music composition using VCVRack. It's still largely work-in-progress, but it's ready to play. There are 3 levels of three difficulty levels each. I write a devlog if you are interested in the development.
  20. TheLoneJedi

    modular PixiJS code with NodeJs

    The project I am working in is a multiplayer node.js game using to communicate where the renderer will be node.js. In order to correctly import my dependencies to the browser i am using browserify. I am trying to use the Entity-Component architecture to design my game and in doin g so wanted to have a "render component" on each game object. The problem is that I cannot use PIXI code on the server side of node.js This is something what i wanted my architecture to look like. A GameObject with multiple components (ex: PhysicsComponent, RenderComponent) in order to follow the Entity-Component architecture and design this game well. In my eyes the code should be able to run on the server and the client so that way the server can be authoritative in the state of the game. The problem is that PIXI code cannot be run on the server side of node.js because a window object is not defined. So here is the question : How am I intended to write gameObject rendering Code using Pixi.js? Is it supposed to be purely client side, and if so how am I supposed to handle GameObject specific rendering and such? I have been searching for several days and can find no answers. Any help would be greatly appreciated.
  21. Hi, I am trying to display only the text content which is there in pixi example port. Everything is working fine in all the browsers except safari. Earlier it was working fine but from past 2 days it is showing only the white screen. All the assets and sounds are loading in background and I am able to play the sound and all but there is no visibility. Is there any specific reason for this or am I missing something ?. I have added the example script also. Any help will be appreciated. Thanks in advance. var app = new PIXI.Application(800, 600, {backgroundColor: 0x1099bb}); var element = document.getElementById('gameCanvas'); element.appendChild(app.view); var basicText = new PIXI.Text('Basic text in pixi'); basicText.x = 30; basicText.y = 90; app.stage.addChild(basicText); var style = new PIXI.TextStyle({ fontFamily: 'Arial', fontSize: 36, fontStyle: 'italic', fontWeight: 'bold', fill: ['#ffffff', '#00ff99'], // gradient stroke: '#4a1850', strokeThickness: 5, dropShadow: true, dropShadowColor: '#000000', dropShadowBlur: 4, dropShadowAngle: Math.PI / 6, dropShadowDistance: 6, wordWrap: true, wordWrapWidth: 440 }); var richText = new PIXI.Text('Rich text with a lot of options and across multiple lines', style); richText.x = 30; richText.y = 180; app.stage.addChild(richText);
  22. waechtertroll

    Distorting textured objects - ideas required

    Hello, although I don't have enough spare time to create games at the moment, I'm playing a bit around with code to understand game mechanics. At the moment I'm teaching myself soft body dynamics. I can create an entity consisting just of cordinates (say a sphere) and play around with their shape, wobbling, squishing etc. But I'm at a loss at how to bind a texture to them that actually distorts according to the coord changes; preferrably in a way performant enough to use it in a game, and most preferrably done in Pixijs. Maybe I'll have to cut the texture into a mesh, bind UV coordinates to them and then use something like three.js to render it? I see that e.g. Dragonbone has some way to add meshes to characters - plus it can be used from pixi. Will it distort textures properly when I modify mesh coordinates, or is this information only used when exporting animations? What other approaches can you think of?

    Cardinal Run

    Hi, I am finishing this year with a NEW GAME! I am super glad - also was about time to stop working on it. You can play the game here I hope the game performance is alright. I noticed little lag here and there. Not sure if I can fix it. Game was developed using pixi.js, pixi particles and howler.js Game is available for non-exclusive license and API integration. Please contact me Gameplay video Some screenshots:
  24. Hi for some reason the renderer is stretching and squeezing to the canvas dimensions how do I prevent that and maintain the aspect ratio? See image below. The green square is suppose to be 50x50
  25. I've been working on this game for a while, and I'm finally doing a "technical release" of it. Since it's still in alpha, you may loose your progress on the next update. It's a retro multiplayer racing game, inspired by Rock'n Roll Racing. I'm using colyseus in the back-end, and pixi.js in the front-end. Play it now: You'll be redirected automatically to a server on EU or US. Controls: Arrow keys for movement 1 - Missile 2 - Drop mine 3 - Turbo / Nitro Hope you enjoy playing, any feedback is very welcome! Cheers! Screenshots below: