Search the Community

Showing results for tags 'pixi'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


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

Found 254 results

  1. Hello everyone, Recently i finished my first medium-sized HTML5 game - Medieval Defense Z. I came from flash background and developing for HTML5 presented with some new challenges. So i would like to share what worked and what didn't. This is more like review/tutorial type of thing, so hopefully someone will find something useful. • Goals: • 60fps. • Smooth gameplay and animations. • Quality comparable to flash games. • Tools: • Language: Haxe. Strictly typed programming language, similar to ActionScript 3.0. Compiles to all major languages, including javascript. • Editing: HaxeDevelop IDE. Freeware, great code completion and very fast compared to everything i tried. • Debugging: Chrome. Has console, debugger and profiler. • Rendering library: Pixi.js. Uses display list concept like flash. Works well. • Sound library: Howler. Good enough, the id system is a bit weird though. • Bitmap font exporter: Free and web-based. • Sprite Sheet Packer: Freeware and very simple. • Graphics: • Scaling will look ugly if you use many small png files for textures. • If you want nice scaling, fast load times and fast rendering - pack everything to 2048x2048 spritesheets (include bitmap fonts too). • Resolution of assets: 1024x768, background can extend to 1382x768, so it covers most aspect ratios in horizontal orientation. • To get proper native resolution in mobile browsers i scaled up renderer and scaled down canvas by window.devicePixelRatio. • Sounds: • Library: Howler. • Sound formats: ogg for Chrome and Firefox, m4a for Safari and Internet Explorer (note: mp3 has licensing issues with play count). • ffmpeg: because of licensing issues and whatnot can't convert to m4a, unless you recompile ffmpeg with m4a, which is a pain to setup. • I used MediaHuman Audio Converter (freeware) to convert from wav to ogg and m4a (64 bit). • iOS Safari: keep in mind that before any sound could be played, user must first tap on the screen. • Mouse Events: • Used pixi.js API to open links. • iOS Safari: under "touchstart" event won't open links in new tabs, use "tap" event instead. • sprite.on("mousedown", callback) for desktop. • sprite.on("tap", callback) for mobile. • Performance: • Reuse frequently used sprites. • Avoid creating too many objects every frame. • I would recommend looking up data-oriented programming to get more juice out of Javascript. • Record timeline with Chrome profiler to find performance bottlenecks. • Masks are slow. Use trim if you only need a simple cut. • Game Debugging: • Simple CSS + DOM side menu. • Basic field view/edit. • Simple buttons with callbacks. • How to debug html5 game on android (mobile) with desktop chrome (PC): 1. Upload game to your website. 2. Go to (desktop) chrome: chrome://inspect 3. Connect Android device with USB and run your game on android chrome (your android device must be enabled for development). 4. Open Command Prompt and enter: adb devices (must have Android Debug Bridge installed). 5. To quit debugging enter: adb kill-server • Conclusions: • Programming in Haxe instead of pure Javascript probably saved hours and hours of debugging. • Pixi.js is great, but i wouldn't recommend doing very complex scenes. • Would have liked more automated solution for spritesheet and sound stuff. • Poor performance bites sooner or later, so be prepared to do extensive profiling. • Stable 60fps is very hard to achieve, even if you keep your code below 1-2ms per frame. • Overall i am happy with the results, however it took longer than expected to make this game. Any feedback is appreciated. The game is not yet released, but here is gif trailer:
  2. Hello. I am trying to build a sort of "Line of sight" shader. I have the a tilemap which is just a Sprite sitting inside of a container. Then I am generating another texture dynamically which represents the "light" data. I want to create a fragment shader to show/hide parts of this tilemap based on the light texture/ I am able to pass this texture into the shader, however I am seeing a problem that I think may be intended behavior, but I'm trying to figure out how to achieve my desired result. The problem is it seems the fragment shader is operating on the screen rather than the underlying pixels in my Container. The container is scaled/translated so I have no way to know which true (non translated/scaled) pixel I am operating on within the shader (vTextureCoord seems to give me coordinates relative to the screen ?). Whereas the lightmap texture I am passing in does not have this same problem. This is my first time playing around with pixi.js filters. Any suggestions ?
  3. Hey guys, just a really quick question on containers. I see that you can use a PIXI.particles.ParticleContainer. In the documentation is says that it doesn't support features such as tinting, alpha, masking etc.. However, as this class is extending from the normal Container, I am curious as to what is different, and how it achieves this. Thanks, Nick
  4. Hi all, i'm facing with this problem on some chrome browser (updated), can some one suggest where i must check the error? I use typescript with webpack. Can some one tell me how to figure out this error? The code work well also in internet explorer!!! The problem is only on chrome windows. This is my webpack configuration: var path = require('path'); var webpack = require('webpack'); var phaserModule = path.join(__dirname, '/node_modules/phaser/'); var phaser = path.join(phaserModule, 'build/custom/phaser-split.js'), pixi = path.join(phaserModule, 'build/custom/pixi.js'), p2 = path.join(phaserModule, 'build/custom/p2.js'); const { CheckerPlugin } = require('awesome-typescript-loader') var definePlugin = new webpack.DefinePlugin({ __DEV__: JSON.stringify(JSON.parse(process.env.BUILD_DEV || 'true')) }) module.exports = { entry: { app: [ //'babel-polyfill', path.resolve(__dirname, 'app/index.ts') ], vendor: ['pixi', 'p2', 'phaser'] }, watch: true, devtool: 'cheap-source-map', output: { pathinfo: true, path: path.resolve(__dirname, 'dist'), publicPath: './dist/', filename: '[name].js' }, module: { rules: [{ test: /\.ts(x?)$/, exclude: /node_modules/, loader: "awesome-typescript-loader" //loader: "babel-loader?presets[]=es2015!awesome-typescript-loader" }, { test: /\.css$/, loader: 'css-loader' }, { test: /pixi\.js/, use: ['expose-loader?PIXI'] }, { test: /phaser-split\.js$/, use: ['expose-loader?phaser'] }, { test: /p2\.js/, use: ['expose-loader?p2'] } ] }, plugins: [ new CheckerPlugin(), new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', filename: 'vendor.bundle.js', minChunks: Infinity }), ], resolve: { alias: { 'phaser': phaser, 'pixi': pixi, 'p2': p2 }, extensions: [".tsx", ".ts", ".js", ".jsx"] } };
  5. Hello, I'm working on PixiJS application where I dressing up my character. So, different PNG images are loaded to Pixi stage. There is a button to finish dressing character and it saves current canvas to gallery using .toDataURL() method. The problem is that during image changing the user can click finish button to save canvas to gallery, but the image is not already loaded in browser, so it result in missing image in canvas data. The example of adding hair image to stage: function dressUpCharacter(callback) { hair_texture = PIXI.Texture.fromImage(hair_img); hair = new PIXI.Sprite(hair_texture); stage.addChild(hair); if (callback && typeof(callback) === "function") { callback(); // callback -> unlock finish button } } As You can see, I already made callback to unlock finish button when my dressing function finishes. The thing is that javascript code completes successfully and adds canvas image to stage, but the image needs few seconds/miliseconds (depending on internet speed) to load in browser. During that time if user clicks finish button it can result with incomplete canvas. Is there any way I can detect canvas images are fully loaded? I saw that PIXI has loader with loader.once('complete', callback) method, but I don't know how to use it. Many thanks in advanced! Josip
  6. Hi all! I have a weird problem, and I don't know how to solve it. What I wanted to make: when I click over a circle, it has to get GlowFilter (or OutlineFilter it doesn't matter but it should be from pixi-extra-filters ( and has to be larger with TweenLite. What I've got: all is good, but while the circle is scaling glowing is broken. I don't know how to explain this in English, but I prepered an example on JSFiddle - Just click over the circle and it will be scaled. All is good. After, click again, it will be usual size. And click one more time and it will something like that (I've attached image). What's wrong? Why it creates those weird lines? P.S. The problem is appeared after second+ click only, but it is actually for this little example only, because there is the same problem is appeared for the first click in my project.
  7. I've used the pixi-compressed-textures.js and can get Spine to load the lower resolution artwork, but I still can't seem to find an exact piece of code for how to rescale the animation at runtime, rather than via redoing the whole thing in Spine. I know this should be an easy fix - anybody have the 1 liner I'm looking for here? I'm developing a visual reading app for autistic children, and Spine has proven to be a pretty easy way to get basic animations up and running fast! I'd really appreciate any advice, as I'm a noob to both Pixi and Spine, while having pretty good experience in JS and AS3.
  8. I'm looking for right way to manage my assets that for device with hd screen used default atlases, but for device with full hd screen or retina used 2x size atlases.
  9. I would like to know if is possible to disable the multi texture batching in a PIXI V4 game. Recently i jus update my game PIXI lib from version 3 to 4.2. I`m using cocoon Canvas + . It seems perfect on iOS and android version greater than 5. In a old phone the texture batching is messing with the textures. Please. Is possible to disable it. I already tried PIXI["settings"].SPRITE_MAX_TEXTURES = 1; PIXI["settings"].SPRITE_BATCH_SIZE = 1024; without success
  10. Hi there folks! It's been a while since I posted something in here, glad to be back! I have a fair amount of experience in game development using JS Canvas, but recently I decided I had move on - so I went with Pixi. I figured out the basics of how to add sprites, do filters and such, but I just can't seem to figure out how to do simple lines and then manipulate them afterwards. What I mean is something like this: I noticed that PIXI.Graphics has an object attached to it called "graphicsData" in which I can find the points that make up the line - great - but when changing the value of these variables, nothing happens to the appearance of my line. I'd appreciate any help, as I'm quite new to Pixi Thank you!
  11. Hello guys, this is my first completed HTML5 game The idea is to tap the ball and dont let it fall, collect the stars to unlock all balls in the game Is very simple game, I hope you enjoy it for a while Game: Game Play: Feedback be appreciated Best!
  12. Hello everyone, this is Crazy Racers. It's my first personal project [Play the Game] The game is an fast-pacing racing game. Features: 12 Different tracks 6 Different Cars (each car has it's own style) Different Obstacles 3 different game modes Leaderboard Game modes: Grand Prix: You race a number of tracks, the racer with more points win a trophy Quick Race: Race one track with 5 other opponents Time Trial: Race alone to try to get to the leaderboard Feedback are welcome, I hope you like this game Game is Available for Non-exclusive License and Re-skins, contact me for me details and for the full version of the game Cheers,
  13. Hello, I'm in the data visualization field and I'm trying to see if I can leverage Pixi.js to create various charts that I've typically be created with SVG. Right now, I'm trying to create a bar chart with position and height changes as the data updates. I've been creating one PIXI.Graphics per bar and I'm updating the graphics width, height, and y positions when the data changes. // This runs ones per bar var rect = new PIXI.Graphics(); rect.beginFill(0x4682B4);rect.drawRect(0, y, width, height);doc.addChild(rect); // When updating barsrect.clear();rect.beginFill(0x4682B4);rect.drawRect(0, y, width, height); My questions are:1. If I'm planning to draw hundreds of bars, is Graphics the right object to use?2. Can I use sprites if I'm going to have different fills, width, and heights for each bar? I'm very new to PIXI, so I'm still trying to learn the API and figure what's the right set of objects to use for the job.
  14. Hi! I'm doing a thing in pixi (actually, in it's dart port ( but that should be the same for the purpose of this question) and I'm using its text features ( I understand that before rendering a text, you set the style in which to render it, and that the style includes many different things like color, align and font... What I don't get is: where do the fonts come from? In the provided example, they used 'Arial' font and I know for sure that you can use 'Snippet' font as well. Is there any list of all available fonts I can choose from? And will these fonts work the on every machine?
  15. I am beginning with pixi.js and have read the appress book about it, i want to make a game where i have a character in the center of the screen and while he is running the camera will keep track of him but will change the view on the map, where eventually i will connect multiple players in the same map and draw them each frame, how do i do this with pixi?
  16. Hi ! I'm a beginner with both pixi.js and vue.js and I can't manage to import pixi.js in my components. I tried different ways : - Import pixi.js in index.html via the CDN <script src=""></script> - Import pixi.js directly in my component (like in the example, it's working perfectly with TweenMax) import PIXI from 'pixi.js' import TweenMax from 'gsap' export default { name: 'home', mounted () { console.log('Mounted home, ready to PIXI') console.log(PIXI) } } The problem is that in my component, 'PIXI' is always undefined. Do you know if it's possible or if it's just me missing something. Thank you in advance.
  17. Hello people, I’m here to ask for assistance on PixiJs (more like a canvas related stuff) and IOS. I want to make an app than take all the available space of the webpage, kinda “Fullscreen” but not necessarily without the actions bar of the browser, What I was doing work pretty well on any browsers except in Safaris IOS browser, in landscape mode (sometime loading the page the first time in landscape work, then when changing orientation and coming back to landscape make the bugs appear). I can’t get to handle the IOS browser correctly, the canvas ignores one or both of the browser bar, causing it to appear under these bar. I just adapted quickly the Pixi’s “bunnymark” demo to show this problem. ( ). I found on the web an example working really fine on iOS landscape mode ( but can’t see an obvious differences with my simple example. It may be an HTML/CSS problem, but I can’t find it exactly. Thanks for your help and have a nice day.
  18. Is there anyway to load textures in pixi synchronously? Something like: var texture = PIXI.Texture.fromImage("bunny.png", onComplete);function onComplete() { var bunny = new PIXI.Sprite(texture);}I tried the following: var img = new Image();img.onload = onComplete;img.src = 'bunny.png';function onComplete() { var texture = new PIXI.Texture(new PIXI.BaseTexture(img));}But the code above gives me an error. Please let me know how I can make pixi work synchronously. Thank you in advance. EDIT: I also tried: but, it also gives me an error.
  19. Hello! My name is Dylan Jones, I work for a studio and we're looking for some contract help as our other developers are busy. We've created games like Battle Group in the past, and are working on a new multiplayer game. We currently have a contractor you might be working with, paid rates depend on speed and quality of work. Let me know if you or someone you know would be a good fit, server knowledge (currently using client authoritative firebase) is a must as we look at resumes (any work on .io genre games is a plus). I can provide more details on the code base (it's a working prototype with mostly clean states) but can not post it. You'll be working with talented folks, like Col Price, out artist for the game seen below: You can contact me on this thread or with Dylan-@-the-Dylan-Jones-.-com if you remove the dashes.
  20. I am trying to create a fragment shader via a PIXI.AbstractFilter to create a wave rippling effect to be applied to a background texture. I have already worked out the algorithm for the wave effect in JavaScript. What I am having difficulty doing is getting the data I need into the shader through PIXI. For my effect to work, I need to have a large Float32Array to keep track of wave heights and a texture containing the original, unaltered contents of the background image to read from in order to apply the effect of pixel displacement (light refraction). I've been doing a lot of searching and have come up with some partial solutions. I attempt to load my large Float32Array into the shader as a texture with type GL.FLOAT (with the OES_texture_float extension) and an internal format of GL.LUMINANCE and read from it. From what I can tell, my shader isn't receiving my data the way I need it to. Just as a test, I set gl_FragColor to read from my data texture, and instead of the solid black that should have appeared, it rendered a color from either the source texture or the texture of the sprite that the filter is applied to.If I weren't using PIXI, what I would try next is to use gl.getUniformLocation, but it takes the current program as its first parameter, and I don't know of a way to access that. The basic flow of my shader needs to go: Read From Array -> Calculate displacement based on value -> Render the current fragment as the color at x+displacement, y+displacement -> Get updated version of array This is my code in the constructor for my shader: ws.Shader = function(tex) { // GLSL Fragment Shader for Wave Rendering =; ws.flExt ="OES_texture_float"); var unis = { dataTex: { type: "sampler2D", value: }, canvasTex: { type: "sampler2D", value: }, mapSize: { type: "2f", value: [ws.width+2,ws.height+2] }, dispFactor: { type: "1f", value: 20.0 }, lumFactor: { type: "1f", value: 0.35 } }; var fragSrc = [ "precision mediump float;", "varying vec2 vTextureCoord;", "varying vec4 vColor;", "uniform sampler2D uSampler;", "uniform sampler2D dataTex;", "uniform sampler2D canvasTex;", "uniform vec2 mapSize;", "uniform float dispFactor;", "uniform float lumFactor;", "void main(void) {", "vec2 imgSize = vec2(mapSize.x-2.0,mapSize.y-2.0);", "vec2 mapCoord = vec2((vTextureCoord.x*imgSize.x)+1.5,(vTextureCoord.y*imgSize.y)+1.5);", "float wave = texture2D(dataTex, mapCoord).r;", "float displace = wave*dispFactor;", "if (displace < 0.0) {", "displace = displace+1.0;", "}", "vec2 srcCoord = vec2((vTextureCoord.x*imgSize.x)+displace,(vTextureCoord.y*imgSize.y)+displace);", "if (srcCoord.x < 0.0) {", "srcCoord.x = 0.0;", "}", "else if (srcCoord.x > mapSize.x-2.0) {", "srcCoord.x = mapSize.x-2.0;", "}", "if (srcCoord.y < 0.0) {", "srcCoord.y = 0.0;", "}", "else if (srcCoord.y > mapSize.y-2.0) {", "srcCoord.y = mapSize.y-2.0;", "}", /*"srcCoord.x = srcCoord.x/imgSize.x;", "srcCoord.y = srcCoord.y/imgSize.y;",*/ "float lum = wave*lumFactor;", "if (lum > 40.0) { lum = 40.0; }", "else if (lum < -40.0) { lum = -40.0; }", "gl_FragColor = texture2D(canvasTex, vec2(0.0,0.0));", "gl_FragColor.r = gl_FragColor.r + lum;", "gl_FragColor.g = gl_FragColor.g + lum;", "gl_FragColor.b = gl_FragColor.b + lum;", "}"]; ws.shader = new PIXI.AbstractFilter(fragSrc, unis); // Send empty wave map to WebGL ws.activeWaveMap = new Float32Array((ws.width+2)*(ws.height+2)); ws.dataPointerGL =;;, ws.dataPointerGL); // Non-Power-of-Two Texture Dimensions,,;,,;,,;, 0,, ws.width+2,ws.height+2,0,,, ws.activeWaveMap); // Send texture data from canvas to WebGL var canvasTex =;;, canvasTex); // Non-Power-of-Two Texture Dimensions,,;,,;,,;, 0,,,, tex.imageData); } I then attempt to update dataTex in the ws object's update loop: ws.activeWaveMap.set(ws.outgoingWaveMap); // WebGL Update;, ws.dataPointerGL); /* // Non-Power-of-Two Texture Dimensions,,;,,;,,;*/, 0,, ws.width+2,ws.height+2,0,,, ws.activeWaveMap); I'm sure that plenty of this isn't right, but I believe that I can sort things out once I can get to the point where I can actually access my data. Can anyone point me in the right direction? This is central enough to my project that I am willing to discard PIXI altogether if there isn't a way to implement what I am trying to do. Also, I am using PIXI via Phaser, if that makes a difference. Thanks!
  21. Hi, guys, I want to write my own plugin to add support of (NP) to the PIXI. NP has support of Canvas as well as WebGL. Is it possible to easy write such plugin to support 3rd party code and what is short plan to write it (like main steps)? NP code just needs to pass position of the effect in the update() and context to the render(), so, it is pretty straightforward, to use it. But I'm not familiar with all details of PIXI architecture and JS is not my main profile, so I need short directions to start dig. Thanks.
  22. I can't for the life of me figure out how to work with enemy sprites that I've pooled into an array. I add them into the array by using .push() and take them out using .shift(), but once they're out and added to the stage, I have no way of selecting them, working with them, or giving them movement behaviors. Does anyone know how I can work with pooled sprites like this? Thanks.
  23. I need to have a single code for web and mobile client. I wrote something lie this: var renderer; var stage; window.onload = function() { var w = screen.width; var h = screen.height; stage = new PIXI.Container(); renderer = PIXI.autoDetectRenderer(w, h); document.body.appendChild(renderer.view); } In my desktop (FullHD screen) w = 1536, h = 864, window.devicePixelRatio = 1.25, but it work correctly. In my android device (HD screen) w = 360, h = 640, window.devicePixelRatio = 2. As seen stage has half the size of the actual screen size (720x1280), but stage children has real and correct size(for example image 60x60 realy has 60 pixels). In result my stage content does not fit on the screen. How to fix it? I need to scale all stage children into ratio? For example: stageChild.scale.x = stageChild.scale.y = 1 / window.devicePixelRatio ? Sorry for my English:-)
  24. down votefavorite I have previous experience with Unity, but I don't like the fact that Unity compiles your game directly into APK (or IOS equivalent). It's because I want to modify the game to provide chat interface (and some other stuff) for multiplayer mode etc. So, I thot of doing it the other way - 'create an app and embed a multiplayer game within it'. Now, again this approach meant that I had to develop for android and ios seperately. But, then I came across React-Native library (mobile extension of popular React framework). Now, I have decided to create an app using React-Native (cross-platform), but now I am confused as to which game engine should I use and I think since React-Native is javascript, game engine needs to be in javascript for seamless integration. I am planning to use to embed the game in my react-native app. Can anyone suggest me any good javascript game engines that can be used along with react-native? I have done some research on Phaser and Pixi but they use WebGL for rendering and I read somewhere that doesn't have great support for WébGL or Canvas(Am I wrong?). Any help is highly appreciated
  25. Hi there, for some low performance devices, phaser's webgl renderer doesn't work, but when I try pixi V3, it goes well, so I am wondering is there any chance to use PIXI V3 renderer in Phaser?