Search the Community

Showing results for tags 'pixi'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

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

Found 342 results

  1. Pixi hitArea for whole stage

    I have on stage special "workspace" pixi container - I use it to allow user to draw on it. It works perfect if I set hitArea dimensions to renderer width and height but the problem is that user can move this layer or zoom in/out. I think result is obvious, after move/zoom it is not possible to draw on canvas because hitArea "run" out from the screen or it is too small. My question is what is the best actual solution for this (pixi v4)? I was thinking about setting Infinite hitArea but this is not possible. I could set hitArea Rectangle to be like 999999px so it should not be possible to go out of drawing area but is it ok? Can setting very big hitArea slow down interaction manager? Also another option was to replace hitArea (make it bigger) after move/zoom but this is proably not the best idea. Is there any elegant solution to cover this case easly?
  2. Spin a wheel and land on specific segment

    Hi All I'm quite new to Pixi (as in this is day #2), I have a simple circle divided into segments (Wheel of Fortune style). What I want to do is spin it, wait for a few seconds, slow down and stop on a specific segment, with a bit of bounce-back. By the looks of things rotation itself is fairly straightforward, but how would I go about doing this? Many Thanks
  3. Hello! I am working on a Phaser project (however, the issue is PIXI related). I was having issues with blend modes not always being set correctly when reloading my page. After a couple of days me and my colleague found that the PIXI.blendModesCanvas was being set to something like ["source-over", "lighter", "source-over", "source-over", "source-over", "source-over"] etc. I don't know if other people have ran in to this bug, but I thought I would document this here at least, and if it still exists in newer versions of Phaser/PIXI, that is what is causing it. To fix it we just set the PIXI.blendModesCanvas to a correct list when we start loading the game. We are using Phaser 2.6.2 at the moment, and the correct list is: ["source-over", "lighter", "multiply", "screen", "overlay", "darken", "lighten", "color-dodge", "color-burn", "hard-light", "soft-light", "difference", "exclusion", "hue", "saturation", "color", "luminosity"]
  4. summerslam

    This is a casino slot game made with pixi.js with high score mode "summerslam" migrated from as3 - to - pixi.js => rendering is super fast http://redchilligame.com/assets/html_games/summerslam/summerslam
  5. Pixi v4 filters in Phaser

    I would like to use Pixi v4 filters in Phaser node application. I´ve read this tutorial: http://phaser.io/examples/v2/filters/pixi-filter and all posts about this that I´ve found, but I still don´t know, how am I supposed to load the filter script. For example the outline filter: https://github.com/pixijs/pixi-filters/tree/master/filters/outline game.load.script('filter', 'outline/src/OutlineFilter.js'); However, this is not working and I just can't figure out, how to load it correctly. (The path is correct.) Thank you
  6. Hi. I have a newbie question. So I create a new PIXI application, draw a blue square onto it, wait a couple of seconds, and then manually start a function to extract the pixels. The extracted pixels are always black. If anybody could help me find out why this is the case, that would be great. The blue square is correctly drawn and visible, and the extract function gives me a correct array of data, but all pixel information in it is black. As I execute the extract function right now manually, it's not possible that it's extracted too early or something like that. Here are the important bits of the code: initPixi() { let type = "WebGL"; if(!PIXI.utils.isWebGLSupported()){ type = "canvas"; } this.pixi = new PIXI.Application({ width: 0, height: 0, antialias: false, transparent: false, resolution: 1, autoResize: true, view: $('.imgCurrent')[0] } ); } updatePixi() { this.pixi.renderer.resize(this.imgWidth, this.imgHeight); this.pixiDraw(); } pixiDraw() { let rectangle = new PIXI.Graphics(); rectangle.beginFill(0x66CCFF); rectangle.drawRect(0, 0, 200, 200); rectangle.endFill(); rectangle.x = 0; rectangle.y = 0; this.pixi.stage.addChild(rectangle); } pixiExtract { this.pixi.renderer.extract.pixels(); }
  7. Realtime winline effect

    Hi all, just after a bit of advice on how best to handle something like the realtime winlines below for a slot game... https://prnt.sc/hpfo74 I currently have it working with PIXI Graphics line to based on the grid which works fine - but leaves little for styling. I've used the glow effect from PIXI-Filters, but that only seems to work on iOS and desktop (Android chrome on a Note 8 refuses to render the lines when the filter is enabled). In previous games I've used simple 9 sliced sprites rotated with different widths to join the sections - but not sure what other methods I could try out here? and which would be the best performance wise too? Thanks in advance!
  8. Move stage pivot so that element is center

    Hey everyone, I want to center an element (in this case a graphics element) in the center of the screen. https://jsfiddle.net/user/adnanchang/fiddles/ As you can see from my code, I am changing the position of the graphics and bringing it to the center of the screen. I don't want that. I want to actually move the pivot/position of the stage in such a manner that the graphics then looks like it is to the center of the screen. Also, would it be possible to save the original position of the stage?
  9. HexSweep.io

    Multiplayer online hexagonal minesweeper. Fight against other players, claim your area and steal theirs in a massive world. Reach the top of the leaderboard by having big score. Claim as much of the world as you can for yourself in this puzzle iogame. Play the game here: http://hexsweep.io Developed entirely in Haxe, using pixi.js for rendering, nodeJS with uws for server. Feel free to ask me anything
  10. 've been making a bunch of games using PIXI.js (version 3.0.6). However, none of the games work on my Huawei device (android version 5.0.1). Either the screen is completely black, or the screen flickers black, or the screen flickers black for a bit and then goes completely black. After doing some searching online, I've found two possible solutions to what looks like the same problem (https://github.com/pixijs/pixi.js/issues/2721). One solution that has been proposed is to change the shader precision value to mediump. However the attribute PIXI.PRECISION. or PIXI.settings.PRECISION does not seem to be available in the version 3 of PIXI. The other solution proposed is to ad the following code before creating the renderer: PIXI.glCore.VertexArrayObject.FORCE_NATIVE = true; However, to do this, I need glCore, and after reading some of the documentation (https://github.com/pixijs/pixi-gl-core), it seems like this is built to work with PIXI version 4. Having said that, I don't even know if these solutions would actually fix the problem. Anyway, any help would be much appreciated!
  11. Hello, Is it possible to color the background of a container without using graphics of any sort? Some kind of 'native' background color property or so? Thank you. Kind regards, Fennek
  12. 1. How to resize the window at any time when I change my window size. Something weird will occur in my app now like the image below.(the right size should be black) 2. How can I directly access mouse local position without listening to an event. I want to deliver my mouse local position to the server even if the mouse doesn't move at all. Thx a lot!!
  13. Hi, I want to create a PIXI.Texture from a WebGL texture. Unfortunately, I have not managed this yet. My WebGL texture is created in the same WebGL renderer context as Pixi with "app.renderer.gl.createTexture()", this works. Then I tried to hang the texture on an existing PIXI.Texture: sprite.texture.baseTexture._glTextures[app.renderer.CONTEXT_UID].texture = myWebglTexture Even without the above line of code, my WebGL texture is inserted into the canvas element and always swaps the texture of the last sprite loaded in Pixi (Change-Texture.mp4). Unfortunately I cannot swap my WebGL Texture with a texture of a specific sprite :-( This approach has unfortunately not worked: Does anyone have an idea? Thank you for your support!
  14. Copying Rendered Sprite to New Texture

    So in my previous post on these forums, I got help using some PIXI filters. Great. Now, I want to turn the filtered result into a new Texture object so that I can use it in a 3rd party system. I basically just need a "screenshot" of the filtered results. Once I have the new texture, I no longer need the original Sprite (at least not for this system). The new texture doesn't need to update or anything like that. I thought I had a potential approach, but it's not working. Just in case I'm barking up the wrong tree, first I want to confirm that I'm going about this in the most efficient manner. First we create the base Sprite and give it the filters in question. Because I want to apply the shaders, I think I need to render the sprite to canvas first, so I try to do so on an off-screen canvas. Last, I attempt to create a new texture using the fromCanvas method. If that's the wrong way to go about this, let's talk about a better way instead. If that is the right way to go about it, here's the problem: fromCanvas never captures the texture. I must be doing something wrong at some stage. Here's the code. Note that instead of using an off-screen canvas, I'm currently using an on-screen canvas, because I wanted to confirm that the image is rendering correctly on the second canvas. It is. // Create the main stage. var width = window.innerWidth; var height = window.innerHeight; var renderer = new PIXI.WebGLRenderer(width, height); document.body.appendChild(renderer.view); var stage = new PIXI.Container(); // Create the offscreen sprite and stage. var offscreenSprite = PIXI.Sprite.fromImage('Base3.png'); /* Code to create and apply filters here. */ var offscreenStage = new PIXI.Container(); var offscreenRenderer = new PIXI.WebGLRenderer(offscreenSprite.width, offscreenSprite.height); offscreenStage.addChild(offscreenSprite); // Put view onscreen for testing purposes. document.body.appendChild(offscreenRenderer.view); It doesn't seem to matter whether I try to capture the texture before or during the main loop. Here's before: offscreenRenderer.render(offscreenStage); requestAnimationFrame(update); var sprite = PIXI.Sprite.from(baseTexture); sprite.x = width / 2; sprite.y = height / 2; sprite.anchor.set(0.5); stage.addChild(sprite); function update() { requestAnimationFrame(update); renderer.render(stage); renderer.render(offscreenStage); } And here's the alternate approach, capturing the texture during the main loop. This version even tries to update the texture during the main loop, even though I don't want to do that. It doesn't help! offscreenRenderer.render(offscreenStage); requestAnimationFrame(update); var sprite; var firstPass = true; function update() { requestAnimationFrame(update); renderer.render(stage); renderer.render(offscreenStage); if(firstPass ) { var baseTexture = PIXI.BaseTexture.fromCanvas(offscreenRenderer.view); sprite = PIXI.Sprite.from(baseTexture); sprite.x = width / 2; sprite.y = height / 2; sprite.anchor.set(0.5); } else { sprite.texture.update(); } } update(); Using console.log, I can confirm that fromCanvas is returning the default, empty results. There's no on-screen results, because the onscreen sprite has no texture. Any ideas?
  15. Habbo WebGL Game Engine

    This is strictly for educational purposes only Since Flash is pretty much being deprecated in most browsers so is Habbo. Since there's retro versions, most of Habbo's assets are available on the internet. I've been using Pixi for now to create a 2D loading screen, which I did successfully. Then it occurred to me that Pixi is mostly just a renderer, and doesn't support 3D the same way as Three or Babylon does. Problem is that, I found coding of 2D UI elements in both Three and Babylon really difficult compared to Pixi. In Habbo it's really minimal what is going to be 2.5D / 3D as only the rooms, avatars and furni are, the rest is basically 2D GUI. So this is how I've done it for now https://gist.github.com/marcus-sa/7993baa14e6301c762747142e55cb5cf Some questions: Is Habbo; 2D with projecting, 2.5D or 3D, and would it be enough to use Pixi only? If no: Would it be possible to extend Pixi with Three or Babylon when there's going to be rendered 2.5D /3D objects? If it's truly 2D with projecting, should I just use Phaser instead? What would be best to do?
  16. Recently I am building an io game like agar.io. But I encounter 2 problems now. First, after reading up some articles in this forum about the camera on pixi.js.I found the best way is to set pivot to the container. I try this and work greatly. But I just wonder can I create another container called camera to perform the functionality of camera instead of using app.stage as a map and camera at the same time? Secondly, what is the best way to get my circle bigger when I eat a food? The only way I think of is using PIXI.Graphics to draw a new circle and replace the old one with it.But it seems time-consuming and stupid. Are there any better solutions? Thx everyone! Below is my test code on pixi. import * as PIXI from 'pixi.js'; // SOME ALIAS const Application = PIXI.Application; const Graphics = PIXI.Graphics; const Sprite = PIXI.Sprite; const ObservablePoint = PIXI.ObservablePoint; const Container = PIXI.Container; const Point = PIXI.Point; // CREATE A NEW PIXI APP const appConfig = {width: window.innerWidth, height: window.innerHeight,antialias: true, view: document.querySelector('#root')}; const app = new Application(appConfig); // CREATE NEW SPRITES const spriteMove = Circle(0xffffff,30); app.stage.addChild(spriteMove); const spriteStop = Circle(0xe83a30,50); app.stage.addChild(spriteStop); // SET CAMERA // FIXME CAN'T NOT BUILD A INDEPENDENT CAMERA MAYBE BECAUSE OF THE PIXI ORIGINAL DESIGN const camera = new Container(); app.stage.position.set(app.screen.width/2,app.screen.height/2); // ANIMATION app.ticker.speed = 0.1; app.ticker.add(()=>{ spriteMove.x += 0.5; spriteMove.y += 0.5; // GROW BIGGER // app.stage.children[0] = Circle(0xfff,r++); // IT DOES NOT ASSIGN REFERENCE SO IT HAS TO BE PUT IN ANIMATION LOOP app.stage.pivot.copy(spriteMove.position); }) // GRAPH FUCNTION function Circle(c, r){ const g = new Graphics(); g.lineStyle(); g.beginFill(c); g.drawCircle(0, 0, r); g.endFill(); const s = new PIXI.Sprite(g.generateCanvasTexture()); s.anchor.set(0.5,0.5); return s; }
  17. I'm experimenting with GLSL shaders in Pixi 4.4, and was trying to make some that would take in two images, the base and an overlay. The shaders would then replace either the Hue, Saturation, or Value of the pixels in the base image with the H/S/V of the corresponding pixel in the overlay image. Transparency on the overlay means "no change." For my tests, I used a 100x100 red square, and the following 100x100 "striped" overlays: That's the Hue overlay, Saturation overlay, and Value overlay respectively. Results were only partially consistent, and all wrong. Here are the results of the Hue and Saturation shaders against a black background. Okay, so the stripes are twice as tall as they should be and the bottom-most stripe is outright missing, as though either the overlay or base were resized as some point in the process. But Value takes the cake: Not only do we have the same problem as above, but there are "teeth" that have appeared off the edge of the 100x100 image (4px in each direction, making a 108x100 image), and there are outlines around every stripe, and if you zoom in especially close you can see that some of the outlines are actually 2 pixels tall, one of near-black, and one of another dark colour, none of which is in the original Value overlay! I'm at a loss to tell if the problem(s) originates in my shader code or in Pixi, especially since tutorials around the net are mum about how to create a second shader2D uniform in any other setup but Pixi. I do want to work with Pixi for this project, however, so a fix for Pixi would be appreciated if the problem really is from there. Here's the HTML/GLSL code. Please don't mind the If statement, I've already had a few ideas on how to get rid of it: <html> <head> <meta content="text/html;charset=utf-8" http-equiv="Content-Type"> <meta content="utf-8" http-equiv="encoding"> <style> body { background-color: black; margin: 0; overflow: hidden; } p { color: white; } </style> </head> <body> <script type="text/javascript" src="libs/pixi.js"></script> <script id="shader" type="shader"> #ifdef GL_ES precision mediump float; #endif varying vec2 vTextureCoord; uniform sampler2D uSampler; //The base image uniform sampler2D overlay; //The overlay vec3 rgb2hsv(vec3 c) { vec4 K = vec4(0.0, -1.0 / 3.0, 2.0 / 3.0, -1.0); vec4 p = mix(vec4(c.bg, K.wz), vec4(c.gb, K.xy), step(c.b, c.g)); vec4 q = mix(vec4(p.xyw, c.r), vec4(c.r, p.yzx), step(p.x, c.r)); float d = q.x - min(q.w, q.y); float e = 1.0e-10; return vec3(abs(q.z + (q.w - q.y) / (6.0 * d + e)), d / (q.x + e), q.x); } vec3 hsv2rgb(vec3 c) { vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0); vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www); return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y); } void main(void) { vec4 baseRGB = texture2D(uSampler, vTextureCoord); vec4 overlayRGB = texture2D(overlay, vTextureCoord); if(overlayRGB.a > 0.0) { vec3 baseHSV = rgb2hsv(baseRGB.rgb); vec3 overlayHSV = rgb2hsv(overlayRGB.rgb); // Hue // vec3 resultHSV = vec3(overlayHSV.x, baseHSV.y, baseHSV.z); // Saturation // vec3 resultHSV = vec3(baseHSV.x, overlayHSV.y, baseHSV.z); // Value vec3 resultHSV = vec3(baseHSV.x, baseHSV.y, overlayHSV.z); vec3 resultRGB = hsv2rgb(resultHSV); gl_FragColor = vec4(resultRGB.rgb, baseRGB.a); } else { gl_FragColor = baseRGB; } } </script> <script type="text/javascript" src="replaceTest.js"></script> </body> </html> And here's the JS: var width = window.innerWidth; var height = window.innerHeight; var renderer = new PIXI.WebGLRenderer(width, height); document.body.appendChild(renderer.view); var stage = new PIXI.Container(); var sprite = PIXI.Sprite.fromImage('flat.png'); sprite.x = width / 2;//Set it at the center of the screen sprite.y = height / 2; sprite.anchor.set(0.5);//Make sure the center point of the image is at its center, instead of the default top left stage.addChild(sprite); //Create a uniforms object to send to the shader var uniforms = {} uniforms.overlay = { type:'sampler2D', value: PIXI.Texture.fromImage('stripesVal.png') // or stripesSat, stripesHue, etc } //Get shader code as a string var shaderCode = document.getElementById("shader").innerHTML; //Create our Pixi filter using our custom shader code var rasShader = new PIXI.Filter(null,shaderCode,uniforms); console.log(rasShader.uniforms); sprite.filters = [rasShader]; function update() { requestAnimationFrame(update); renderer.render(stage); } update(); Any help would be appreciated!
  18. PIXI and globalCompositeOperation

    Hi, Is it possible to change the globalCompositeOperation in PIXI CANVAS renderer? I can't find any info about this Thanks for your help, Fred for example: globalCompositeOperation = 'destination-out'
  19. Need advice for some project

    Hi guys. I want to create a effect in PIXI, that looks like first frames in this video -> http://hubblesite.org/video/513/news_release/2006-01 (stars shooting/flying by). What would more experienced PIXI'oniers advice to achieve such effect? Performance is critical, I want it also to work on mobiles. For now I'm thinking: 1) Particle container, that's for sure? Maybe with some 1-3 star sprites? 2) Projection plane for start movement? Or just calculate it with some custom simple logic?
  20. Proper way to animate sprites

    I'm wondering what the best way to animate a sprite is. Is there a basic example or tutorial out there somewhere? I have ten images in a spritesheet that are part of an idling animation, and I made a texture for each of the images. I put the textures in an array, and my plan is to just change the texture of my sprite each frame in the gameloop, looping through the array of textures over and over again. Maybe using Sprite.setTexture ??? Is that a good way to go about it? Any links to info or tutorials would be much appreciated. Thanks,
  21. Hey! I've decided to build a simple 2D framework for building multiplayer/MMO games (similar scope to Agar.io), I have significant experience in building multiplayer engines for windows/linux but I have never touched web. If you have any advice on libraries and development technologies, or general advice, I would greatly appreciate it. My current tech stack (if you think this is naive feel free to call me out, as I am indeed naive.): Language: Typescript Client Platform: Browser IDE: VS2017 Rendering: Pixi.js Physics: Box2D or similar Level Editor: Tiled or similar Animation: Spline Server Platform: Linux VM via google or aws Run time: Node.js Web Server: Apache Database: MySQL Shared Modules: UMD Networking: WebSocks / Socket.io Data Structures: typescript-collections Logging: Log4ts (based on Log4js) My framework will be a microservice architecture that will used to create the basis for the client engine and the server authority engine and then a bunch of microservices that clients interact with (Authenticator, Inventory, Logging, etc). Q: Why don't I use Phaser or other for the client engine? From what I can see is that Phaser is hard and/or in optimal to run on the server side. I could use it on the client and then bunch together similar components and run them on the server but from what I can see Pixi provides a lot of runtime functionality that I will need, and I like the idea of using same physics and other libraries on both client and server. Thanks in advance! Edit 0: Object pooling: Opool Edit 1: Typescript Optionals: https://www.npmjs.com/package/ts-optional Node Websockets: https://www.npmjs.com/package/ws Browser Event Emitter: eventemitter3 Edit 2: Docker: for creating instances of node.js microservices. Scaling: not sure yet, but simplest case will be a c++ service that will spawn docker services and join the cluster as a ring node and will limit the time slice of each microservice.
  22. I'm facing problem in getting screenshot of current state of canvas, which is get rendered dynamically using pixi.js library. Below written code i'm using to generate canvas and when i use toDataURL() function on dynamically generated canvas it always returned black image. /* PIXI Renderer object of the game. */ var renderer = PIXI.autoDetectRenderer(FIELD_SQUARE_SIZE_PIXELS, FIELD_SQUARE_SIZE_PIXELS, { backgroundColor: 0xF2F2F2 }); /* This code i'm using to change color of button on canvas. Which work fine.*/ var whiteButtonsArr = whiteButtons.graphicsData; for (i = 0; i < whiteButtonsArr.length; i++) { var button = whiteButtonsArr; button.fillColor = WHITE_BUTTON_FILL_COLOR; whiteButtons.dirty = true; whiteButtons.clearDirty = true; return true; } After some analysis i have changed the code to render canvas (added preserveDrawingBuffer attribute )to get current screenshot of canvas. After adding preserveDrawingBuffer attribute i'm able to get the current state of canvas using toDataURL() function. But button's color is not getting changed on UI. Although while debugging button.fillColor pick the color but doesn't reflect on UI. /* PIXI Renderer object of the game. */ var renderer = PIXI.autoDetectRenderer(FIELD_SQUARE_SIZE_PIXELS, FIELD_SQUARE_SIZE_PIXELS, { backgroundColor: 0xF2F2F2 }, { preserveDrawingBuffer: true }); Please let me know if any other approach or way is available to take screenshot. Thanks in advance.
  23. Word wrap in other languages

    Does anyone know if pixi.js takes into consideration word wrapping for languages like Japanese where there are no spaces?
  24. Performance

    I updated my iPhone to the new ios and immediately, my game's performance dropped... It was still ok, but noticeably not as smooth (I have an iphone SE which I appreciate is an older/weaker spec device.) What I found was that forcing the game to run on canvas fixed the issue (it also removed the flickering that I'd noticed on my kid's Kindles which are definitely older and very much weaker in spec.) For this game, it's fine, there's nothing that needs to be WebGL, but moving forward (i.e. next game) I was interested in using filters &c. So, is there anything I should be looking at from a code point of view to avoid poorer performance on older devices? Or, have we got to the point where trying to support legacy devices is impossible? Any other thoughts?
  25. Is Pixi GameEngine

    I'm wondering is Pixi Game Engine or Framework? I'm asking this because Companies in their job ads always refer Pixi as a GameEngine. My opinion is: it's framework and I always have problems with interview trying to convince other side: "come on guys, It's not Game Engine it's framework :-)" Thanks