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
    • 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

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Website URL


Twitter


Skype


Location


Interests

Found 398 results

  1. 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; }
  2. 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!
  3. trsh

    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?
  4. Fred Gontier

    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'
  5. NITWIT

    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,
  6. 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.
  7. Branch

    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?
  8. 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.
  9. charlie_says

    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?
  10. gonzos

    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
  11. I want to make the camera follow my sprite around. (so my sprite is always in the center of the screen) What's the best way to go about this? Does Pixi have built-in camera functions? I thought about just moving everything else relative to my sprite, but I thought this wouldn't be the best way. I googled around a bit, but with no luck. Any tips or resources would be much appreciated. Thanks.
  12. tips4design

    Mask out parts of an image?

    I have a layer (displayobject) with multiple sprites inside. I want to add a circular explosion that would remove the parts of the object they overlap. So, after adding the explosion circle the current display object should. Attached is a picture of what I want to achieve. I know that I could use a black & white mask, where everything is white and the explosion is black so it's masked, but this means creating a new bitmap as large as the entire canvas just to draw a tiny cutout and this would have to be done for each explosion. Also, new sprites might be added after the explosion occurred, so the new items shouldn't be masked by old explosions. The issue is that the background is a texture, not a solid color. If it was only a color I could have simply added a new circle with the background color over the shapes and it will look like a cutout. I think a WebGL solution such as using shaders might be used. Question 1: Can we add a mask in PIXI that says: "hey, keep everything from the original image EXCEPT for the pixels of this mask" ? Question 2: Do you have a better idea of how to create an explosion that removes parts of sprites that already exist and allow for new sprites to be placed over the explosion? What's the most efficient way to implement this? PS: The sprites are actually meshes, I tried converting them to bitmap using .cacheAsBitmap on the mesh, but it seems to be buggy (the quality drastically drops and the entire mesh is actually displaced by several pixels when it is cached as a bitmap).
  13. Hi all I was wondering if Pixi has a method for creating the appropriate sized text when within a scaled container. In my case, I scale the main container so that its height is 1080. In this container, I would create a Pixi.Text object with height 20px. From what I understand, this creates a 20px text object, which is then scaled down when placed in the container. This results in text which is slightly blurry. I'm planning on creating a method which would calculate the true pixel height required, which would then be scaled to the size needed. Is this something which Pixi itself supports, or would I need to build this myself?
  14. spiraloops

    Pixi Shader Texture size

    Hello everyone ! I'm pretty new in PixiJS and i can't figure out how to do this : Have a texture passed to a shader through uniforms and resize its sprite without "jumps" : https://jsfiddle.net/spiraloops/zohpru02/ (try to resize it...) What i want to have : https://jsfiddle.net/spiraloops/k5wfmqu1/1/ My final intention is to perform video masking with resize. So I need the two textures (video and mask) to resize the same way...
  15. Schnitzel

    Found some unnecessary calculations

    Not sure if here's the best place for this but since it is not a bug etc I avoided opening an issue on github I stumbled upon some odd rotation code in phaser while reading https://phaser.io/tutorials/advanced-rendering-tutorial/part7 From src/pixi/renderers/webgl/utils/WebGLSpriteBatch.js and src/pixi/display/Sprite.js // Rotate matrix by 90 degrees // We use precalculated values for sine and cosine of rad(90) a = a0 * 6.123233995736766e-17 + -c0; b = b0 * 6.123233995736766e-17 + -d0; c = a0 + c0 * 6.123233995736766e-17; d = b0 + d0 * 6.123233995736766e-17; Ok. Some rotationcode with fancy precalculated values. But: the value given in e-notation is 0.00000000000000006123233995736766 and therefore effectively zero. Which makes sense since this was meant to be the precalculation of cos(rad(90)) - which equals exactly to zero. I suppose the literal resulted from a rounding error when someone typed Math.cos(Math.radians(90)) into a console So a better version would be: // Rotate matrix by 90 degrees a = -c0; b = -d0; c = a0; d = b0; Maybe someone sees this and is willing to fix it on the side...
  16. CapricornGaikov

    Pixijs free sprites atlas packer

    Hello everyone! I've been release my own atlas packer for pixijs. It's fast and easy to use command line tool. You can try it and send me your beedback. Main features: - scaling for multiple dimenstions - alpha trimming - multisheet textures if not all sprites could be allocated into a single texture - png, jpg - texture format - texture size limit - sprites border to avoid render artefacts Platforms: MacOS, Windows Download from: https://github.com/Gaikov/GameTools/tree/master/SpritePackerConsole
  17. Hi, I'm just getting started with Pixi. I made a little sprite that walks around and shoots things. Whenever I bump my sprite into the bad guys, I want him to disappear. So I ran stage.removeChild(mySprite) and he disappeared! But... He still shoots when I click and he still moves around with WASD. So it just makes the sprite invisible? Here's a link: http://www.med.wadholm.com/Kaitlyn/sprites/pixi/bunny/
  18. Hi All! Do you have experience in HTML Game Developement? And the following skill set? JavaScript, JQuery HTML/HTML5 CSS/CSS3 Pixi JS / Spine JS Google Closure Active knowledge of English Send me a PM if you would like to know more details about this. Relocation is required and VISA is supported. Please don't contact me if you are selling services from company's. Only looking for people who are willing to move to Prague and have a full time contract with us.
  19. When i am drawing any sprite usign pixi its looking blurry on both mobile (android mobile ) and pc (chrome browser) Then i tried setting (roundPixels: true). Then it becomes sharp on pc but still blurry on mobile devices. I have looked at forums but could n't get any help. I tried looking on stackOverFlow but i got nothing which could actually resolve my problem. I have used below code. var gs = {width:950,height:640}; var app = new PIXI.Application(gs.width, gs.height, { resolution: 1, antialias: false, forceFXAA: false, forceCanvas: false, autoResize: true, transparent: false, backgroundColor: 0x000000, clearBeforeRender: true, preserveDrawingBuffer: false, roundPixels: false }); var down = PIXI.Sprite.fromImage("images/icon.png"); down.anchor.set(0, 0); down.position.set(100, 150); app.stage.addChild(down); Please help.
  20. shashank

    Remove SpriteSheet TextureCache

    I have loaded SpriteSheet using json. Like this below. const loader = new PIXI.loaders.Loader(); loader.add('bunny', 'data/bunny.png') .add('spaceship', 'assets/spritesheet.json'); loader.load((loader, resources) => { }); I want to remove all the TextureCache which was loaded using this spritesheet.json only. I have tried. PIXI.Texture.removeFromCache("spaceship"); PIXI.Texture.removeTextureFromCache("spaceship"); But in PIXI.TextureCache names of all the spriteFrame were included there. And still i am able to use image form frame. Using this. var bgSprite2 = PIXI.Sprite.fromFrame("ship1"); bgSprite2.anchor.set(0.5, 0.5); var pos = {x: 300, y: 200}; bgSprite2.position.set(pos.x, pos.y); stage.addChild(bgSprite2); I want to remove all the entries of spriteFrame in TextureCache and i want to load new set of spriteFrame. I am doing this because i have spritesheet animations of two diffrent spaceship but the individual symbol name of both spaceship are same. Please help.
  21. infromthecold

    Sky Fight now live

    Announcing skyfight.io, made with pixi, html5, php with the servers in c++, it has taken me 12 months which is about 5,000 hours on the code/art, it has been localised into 6 languages, with more work and languages to follow. I hope you like it The game has 7789 lines of JavaScript, 9430 lines of c++, and 984 lines of PHP/HTML with pixi as the graphics engine. I have UK/European and USA servers. so don't just sit there, get one up!!! http://skyfight.io/
  22. Mehrdad

    Stoping followcurve

    Hi everyone, I'm new to pixi.js, I have made sprite and moving it by followcurve function, I want to detect mouse collision with sprite and change followcurve path, but I can't stop sprite and starting new path until the sprite reach to the end of current path. xDestinition = yDestinition = 0; function play() { if (pointer.hitTestSprite(cat)) { console.log('*****************************************'); gotoNewPath(cat); } z = Math.floor(giveMeDistance(cat.x, cat.y, xDestinition, yDestinition)); if (z == 0) { gotoNewPath(cat); } } function gotoNewPath(movingObj, xD, yD, time) { xDestinition = (xD != null) ? xD : giveMeRand(fWidth); yDestinition = (yD != null) ? yD : giveMeRand(fHeight); let curve = [ [movingObj.x, movingObj.y], [giveMeRand(fWidth), giveMeRand(fHeight)], [giveMeRand(fWidth), giveMeRand(fHeight)], [xDestinition, yDestinition] ]; c.followCurve( movingObj, curve, 120, "smoothstep", false ); } Any advice? thanks.
  23. Hi All, I'm familiar with these technologies: JavaScript, AS3, Haxe, and have a lot of experience in multi-platform development. Several recent projects have been created using the Phaser framework, but I'm always open to new knowledge. Send me message or use email bestpositiveexperience@gmail.com Regards, Nikolai
  24. TheAlmightyOne

    Displacement filter scale issue.

    Hi, I've long wanted to implement a neat looking invisibility effect for my game, tried using DisplacementFilter, but stumbled upon an issue with scale property. While it works correctly to displace areas under the displacement sprite I created, it also displaces entire container on which the filter is applied. I presume its from non existent knowledge about the subject and how those filters work, but I'm still hoping for either a fix or a reasonable explanation if anyone can help me with this please. Everything in my code follows DisplacementMap example on pixijs.com (one with the grass and magnifying glass). What is different is my stage tree. I have 3 containers for each layer and inside those there are separate containers for chunks that hold the map data, since it comes from the server. const playerSprite = new PIXI.Sprite(new PIXI.Texture(PIXI.utils.TextureCache['player.eyes'])); const displacementSprite = new PIXI.Sprite( new PIXI.Texture(PIXI.utils.TextureCache['player.normal']) ); let displacementFilter = new PIXI.filters.DisplacementFilter(displacementSprite); playerSprite.position.set(16 / globalScale * fs, (8 - globalScale) / globalScale * fs); playerSprite.scale.set(globalScale, globalScale) this.scene.addChild(playerSprite); this.scene.addChild(displacementSprite); displacementFilter.scale.x = 20; displacementFilter.scale.y = 20; displacementFilter.enabled = true; displacementSprite.position.set(16 / globalScale * fs, (8 - globalScale) / globalScale * fs); displacementSprite.scale.set(globalScale, globalScale) return { scene: this.scene, filter: displacementFilter }; the return value from this block is added to the main stage container, and filters are applied to bottom 2 layers. Should i perhaps look into filterArea? Here is the undesired effect on the edges. You can also see the slanted top layer on the trees. so 2 layers are moved by the filters scale property.
  25. voste

    text height isue

    Hi, I have problem with getting height of text. Here is a example: text.style.wordWrapWidth = width; var height = text.height; Height is not correct value! After some time when i print in console "text.height" I get correct value! Is there a way to force text transform ?