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
    • Facebook Instant Games
    • Web Gaming Platform
    • Coding and Game Design
  • Frameworks
    • Phaser 3
    • Phaser 2
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
  • 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 437 results

  1. Hello! I have a square picture,Now I want to cut this picture into a hexagonal picture without using photoshop. Is there any good implementation idea? mask´╝čor frame?
  2. Hey. I would like to know about drawCalls and their optimization. For example, there is an atlas, one of the pictures with additive blending mode. - Can we do it all in 1 drawCall. (If possible, explain why it is impossible and how it would be possible). The second question, is the developer Yggdrasil in his games uses sequence, an atlas filled with sequences. My developers said that the sequence in Pixi js is bad, and it is better not to use them because of optimization. But Yggdrasil normally uses them and is not afraid of it. Do they use webgl instances? with vertex shader? Can you tell me?
  3. Pixi.js is a great lib and it did help me a lot in building webgl-based apps. But when I try to render text with background, I run into some problem: 1. PIXI.Text has no straight way to fill a text with background ok.I tried to search the forum and find some methods like, I can use PIXI.Grahpics to draw a Rect or RoundedRect , then combine the text and the rounded shape into a container so it looks like the text has a background; In single line text, it appears so good but is this a right way? 2. I can't find a way to build 'tight' background with multi line text; What do I mean a 'tight' background? See the pic below: (the pic comes from and if u read the article u can learn some tricks to make these special background in css) Well, come back to PIXI.js. I know that the text sprite is certainly a Rectangle by default, so when I add a 'background sprite' it's also a Rectangle:) And I find some useful filters like OutlineFilter but it can't use to outline a text , and I'm not an expert in writing gl shaders. Has anyone met the situation before(render multiline text with background) or can give me some advice? Thanks very much.
  4. i am trying to making zoomin images slideshow using pixijs on canvas from three images below this I tried but not succeed. My question in how to add zoomin or zoomout image in pixijs for specific width and height, then second image and so on. I am writing this code var pixiapp; var pixiloader = PIXI.Loader.shared; initpixiapp(); function initpixiapp() { pixiapp = new PIXI.Application({ width: 1280, height: 720 }); document.getElementById('canvas-container').appendChild(pixiapp.view); pixiloader.add('images/img1.png').add('images/img2.png').add('images/img3.png').load(handleimagesload); } function handleimagesload() { var imagessprites=[] var img1 = new PIXI.Sprite(pixiloader.resources['images/img1.png'].texture); var img2 = new PIXI.Sprite(pixiloader.resources['images/img2.png'].texture); var img3 = new PIXI.Sprite(pixiloader.resources['images/img3.png'].texture); imagessprites.push(img1) imagessprites.push(img2) imagessprites.push(img3); for (let index = 0; index < imagessprites.length; index++) { const element = imagessprites[index]; pixiapp.stage.addChild(element); // here will the the code to run zoom image to specific width and heigth and then move to next image, // here is my code, its only display zooming third image var ticker = new PIXI.Ticker(); ticker.add(() => { console.log('ticker called') element.width += 1; element.height += 1; if(element.width==1500) { ticker.stop() } }) ticker.start() } } One more things, how to display a box with text for three seconds before slideshow start.
  5. We have a JS developer job opening that would benefit from someone with WebGL skills. Are you a talented programmer with a passion for open source? We'd love to hear from you. The job is developing an open-source scientific library, for the precise/rapid presentation of stimuli to participants in reaction time experiments and similar, which is why skills in dynamic high-performance graphics programming would be of benefit. This is part of a larger project mostly in Python,, which is a pretty popular package within behavioral sciences (psychology, neuroscience, linguistics etc). So if you're a good coder and fancy working in open source and/or science programming then we'd love to hear from you. kind regards, Jon
  6. Pixi usually performs really well even with heavy scenes. I can put hundreds of objects, even thousands of particle sprites and get 60 FPS on mobile. I typically only use a single masked object in a scene but recently needed to use more and I was surprised at how badly Pixi performed with masked objects. For every masked sprite, I lost about 5 FPS on mobile (both Android and iOS on old and new phones, newer phones actually performed worse in some cases). By the time I added 4 masked sprites, I was down to 40 FPS, adding 10-20 masked sprites dropped to 20 FPS with really bad stuttering. As soon as I switch the mask off by removing the assignment, it goes from 20 FPS to 60 FPS, even with 200 of the same sprites. It doesn't seem like it should take so much resources to do masking given all the other effects that are possible. Tinting for example, adds a value to every pixel and costs nothing. Masking is just checking a pixel in one object and setting the equivalent pixel in the other object. Is there a faster alternative to using object.mask = mask? Is there a graphics buffer I can use to set the pixel values myself, e.g if I could create an array of pixel values and generate a texture buffer from that. Javascript is pretty fast with arrays. The main thing that bothers me is that the low performance happens with static masks. I could understand the performance hit when the sprite is animating relative to the mask but not when they are both static. Why doesn't it buffer the masked sprite and use that over and over like a normal sprite? I found a thread that describes the same issue, unfortunately I'm stuck on v3 for now: I just found the following with a possible alternative using multiply blending: To isolate it, it suggests using a voidfilter. Is this the fastest way to do masking in Pixi? If so, is there example code for this? Say that I did at some point want to draw a texture pixel by pixel, one way would be to draw a tinted 1x1 pixel sprite into a render texture. Is there a better way than this e.g set values in a buffer and convert it to a texture? Is there a way to read a pixel color/alpha value from a sprite or texture. There seems to be an extract function for WebGL and Canvas but it looks like this extracts the viewport. It would be good to be able to render sprites to a rendertexture and be able to read the pixel values of that texture using pixel co-ordinates.
  7. Hi, I'm happy when I found this forum couple of weeks ago. I was reading many of the post regarding frameworks to learn more. Thanks! We (University of Extremadura) want to develop a free and open source game for highschools for the girls and boys to learn to program. The idea that we have is really similar to this game mechanisms: (thematic and language to learn will be different and our target are mobile web browsers). For the code editor we have already selected codemirror. However, for the game framework, being a really simple moving and interaction mechanisms (no phisycs, 2D, only with 4 different rooms and badgeds as reward), we are not sure about going directly with typescript, pixi or phaser. Any advice would be welcome.
  8. Hi, I'd like to render points with PIXI.DRAW_MODES.POINTS and shaders. But I am not successful in displaying it. A minimul example is shown below.( const renderer = new PIXI.autoDetectRenderer(); = 'pixi-canvas'; document.body.appendChild(renderer.view); const geometry = new PIXI.Geometry() .addAttribute('aVertexPosition', [100, 100, // x, y 100, 200, // x, y 300, 200], // x, y 2) const vertexSrc = ` precision mediump float; attribute vec2 aVertexPosition; uniform mat3 translationMatrix; uniform mat3 projectionMatrix; void main() { gl_Position = vec4((projectionMatrix * translationMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); }`; const fragmentSrc = ` precision mediump float; void main() { gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0); }`; const shader = PIXI.Shader.from(vertexSrc, fragmentSrc, null); const mesh = new PIXI.Mesh(geometry, shader); mesh.drawMode = PIXI.DRAW_MODES.POINTS; // doesn't work // mesh.drawMode = PIXI.DRAW_MODES.TRIANGLES; // works fine const stage = new PIXI.Container(); stage.addChild(mesh); renderer.render(stage); This code in any other PIXI.DRAW_MODE works fine. WebGL Points exsample( works too, so I think that the cause of this problem is not my environment. ----- pixi v5.2.0 Windows10 / Chrome79.0.3945.88 ----- I'd really appreciate it if you could give me your advice.
  9. Hello, I have been trying to add underline for text but could not able to get it done. I will also have multi lines of text sometimes. Is there any solution or predefined methods in pixi to achieve this?
  10. So I wanted a loading animation in the starting phases of my game, like you do, but I am pretty new to pixi so I tried to follow some tutorials to create an animated sprite from a sprite sheet using the built in code in Pixi to extract an animation from a texture packer file, but no matter what I do, i get this message ( load is the animation id) Uncaught TypeError: Cannot read property 'load' of undefined at e.loadProgressHandler (index.html:49) at e.o.emit (pixi.min.js:8) at pixi.min.js:19 at t.value (pixi.min.js:10) at pixi.min.js:9 at s (pixi.min.js:9) at e.<anonymous> (pixi.min.js:19) at pixi.min.js:9 at pixi.min.js:9 usually there are 2 or 4 of these messages in the console, i saw another page said the issue was because pixi couldn't recognize the json file type because there was no extension, but mine has that, many examples had let sheet = PIXI.loader.resources["Images/Loading/loadanim.json"].spritesheet; while I have let sheet = PIXI.loader.resources["Images/Loading/loadanim.json"]; but with the .spritesheet added it makes things worse, saying this Uncaught TypeError: Cannot read property 'animations' of undefined at e.loadProgressHandler (index.html:49) at e.o.emit (pixi.min.js:8) at pixi.min.js:19 at t.value (pixi.min.js:10) at pixi.min.js:9 at s (pixi.min.js:9) at e.<anonymous> (pixi.min.js:19) at pixi.min.js:9 at pixi.min.js:9 I've looked at a ton of differen't tutorials and pages concerning glitches like mine, but none of them have told me anything of use, while my code seems to follow the structure of all the other pages, it still rejects my animation file, it could be because of the html, or the pixi file, but as I said I am completely new to this and I have no idea what could be wrong. index.html loadanim.json
  11. Hi everyone! I am going to load sound file in vue-pixi. I have no way to do this! Please help me. Thanks
  12. Hi everyone! I have some problem with pixi.js spine event. I am using generated spine json file by another source. Anyway, it has some user defined events. (Added image file) I want to customize event end result. How can I do this? Thanks.
  13. I am using PIXI version 5. In my project, I need to play a video when user hits on preview. I could able to stop auto play but I could not able to start the video on clicking on preview. I have used below line to off auto play texture.baseTexture.resource.autoPlay = false; Here is my code this.appRenderer = new Application({ width: width, height: height, }); this.videoTexture = PIXI.Texture.from(video); this.videoSprite = new PIXI.Sprite(this.videoTexture); this.addChild(this.videoSprite); there is no play function in texture.baseTexture.resource.source.
  14. Jenson

    Pixi - Vue

    Hi everyone, I wanna use vue-pixi package on my vuejs project, But this package doesnt work properly. Which version of vuejs do I have to use for this package? The package is installed but the Import command doesnt work. vue-pixi is not recognized. Thanks­čśë
  15. Hi everyone! I need to change slot attachment with text in PIXi-spine. How can I do this? I found somethings on this. Could you please explain to me? I am hearing you here asap! Thanks
  16. I am working on displaying a text with background color in pixi. I could not able to hide overflow text (see attached) . I have added bit of related code below. Please someone help me!! renderer(){ let style = { breakWords: true, wordWrap: true, align: "center", dropShadowAngle: 0, dropShadowDistance: 0, fill: textColor, //Text color stroke: textColor, //Text color, fontSize: textSize + "px", fontFamily: fontFamily != null ? fontFamily : "Arial", //TODO fontWeight: fontStyle == "bold" ? fontStyle : "normal", //TODO fontStyle: fontStyle == "italic" ? fontStyle : "normal", //TODO align: "center", wordWrap: true, cacheAsBitmap: true, // for better performance wordWrapWidth: this.textWidth != null ? parseInt(this.textWidth) : "" }; let textPIXI = new PIXI.Text(textName, style); this.setTextPosition(textPIXI, textBackgroundColor, textDimensions); } setTextPosition(textPIXI, textBackgroundColor, textDimensions) { if (Object.keys(textDimensions).length > 0) { const textBackgroundGraphics = new PIXI.Graphics(); // Rectangle textBackgroundGraphics.beginFill( PIXI.utils.string2hex(textBackgroundColor) ); textPIXI.x = this.textPosX + (this.textWidth/2 - textPIXI.width/2); textPIXI.y = this.textPosY + (this.textHeight/2 - textPIXI.height/2);; textBackgroundGraphics.drawRect( this.textPosX, this.textPosY, this.textWidth, this.textHeight ); textBackgroundGraphics.endFill(); //Add text and backgroundcolor to the container this.addChild(textBackgroundGraphics, textPIXI); } } I want to hide which is outside of the box.
  17. Hi I am getting empty screen saying an error that (INVALID_VALUE: tex(Sub)Image2D: video visible size is empty) while playing video in chrome V77.038 but playing as many times without any issue in firefox V 69.02.
  18. Hi, my game is supposed to have support for canvas, and so I added the pixijs-legacy when we upgraded to 5.0.4. However, it seems it won't recognize the fallback support and I still get this error. I can see the pixi-js legacy being loaded, though. I'm not too familiar with the whole workflow yet, so I'm finding it hard to figure out. Do you guys hav e any idea how to fix it? Thank you so much,
  19. I have implemented PIXI application with more containers like containers inside another container. I am adding PIXI.Texture for video and PIXI.Sprite for Image view. Everything working fine for the first time. Whenever I try playing video again by closing and opening page, I can see blank and throwing Uncaught TypeError: Cannot read property 'updateTransform' of null I found somewhere that I need to clear the containers and PIXI.Applications. I am doing like below but could not get it done. try{ if (this.appRenderer != null || this.appRenderer.stage != null) { if(this.ticker.started){ this.ticker.stop(); this.ticker.remove(this.tickSlideRight); this.ticker.destroy(true); } =>{ //it contains another container in which video and image functionalities implemented item.destroy(true); }) this.mainContainer.destroy(true); this.imageSlideElementHolder.removeChild(this.appRenderer.view); this.appRenderer.stage.destroy(true); this.appRenderer = null; } }catch(ex){ console.log("Component Unmount, Pixi release ",ex.message) //TO-DO }
  20. Hi, I am trying to build an trading orderbook heatmap which basically takes all pending orders from a securities and plots it in the form of a heatmap shown below where brighter colors mean more volumes. Canvas 2D implementation has has performance issues given the number of blocks and so I am exploring the idea of using webGL through PIXIJS as I am familiar with Canvas 2D APIs. Would like to know which tools should I start experimenting with. I understand you may not have a definite set but a menu of tools to choose and experiment with for best performance). Use case is to efficiently draw large number of small blocks
  21. NMN

    Brush Blur

    Hi All, I'm trying to implement a paint brush blur filter similar to the brush displacement filter here: . Could anyone point me in the right direction? Thanks!
  22. I am working on image corousal (Image slide). I have two images in two different container under main container. Canvas size is 270* 270. So two containers are set in a position of -270, 0. When user starts slide right animation, I will start ticker and will stop until second container reaches to x coordinate '0'. this.appRenderer.ticker.add(delta => this.tickSlideRight(currentSlideNumber,delta)); // ticker right slide tickSlideRight(currentSlideNumber,delta){ try{ this.imageBaseContainer[currentSlideNumber].x += 1 + delta; if(this.imageBaseContainer[currentSlideNumber].x >= this.appRenderer.screen.width) { console.log(this.imageBaseContainer[currentSlideNumber].x, this.appRenderer.screen.width); this.appRenderer.ticker.stop(); } }catch(ex){ alert(ex.message); //TO-DO } } Can anybody helps me to give duration for ticker within container slide should be happend.
  23. I am trying to apply AdvancedBloomFilter to a sprite, but now the filter is applied to the entire sprite(even the transparent pixel). Is there any way to just apply the AdvancedBloomFilter to the colored pixels?
  24. Nagaraju

    Video Cropping

    Hi Team, I am banging my head against wall from 2 days. I have a video of different sizes. User can crop video (Just showing cropping area on top of video and getting x,y, coordinates of cropping area). End of the day using back end server I will capture cropped video until I have to mask the video as cropped. Lets assume video original size if 720x1280, the size I am going to show may not be with same size (e.g. 520x292). So after cropping done, I will get the x-scale and y-scale using below formula. var scaleX = 520/720; var scaleY = 1280/292; var cropX = croppedX * scaleX; var cropY = croppedY * scaleY; I could able get actual cropping dimensions but I could not understand how to implement scale in pixi sprite to mask as a cropped video. I am using setTransform method but could not meet desired result. let scaleX = (this._assetSprite.width/newMediaData.croppedDimensions.width); let scaleY = (this._assetSprite.height/newMediaData.croppedDimensions.height); this._assetSprite.setTransform (-(newMediaData.croppedDimensions.x * (scaleX)), -(newMediaData.croppedDimensions.y * (scaleY)));
  25. Hello, I am a Korean developer. I play animation through pixi-spine. The problem is, I want to turn off anti-aliasing because my spine is low resolution When you false antilias to an option on canvas, other objects look like pixels, but spines don't. What should I do? Even if the translation is unstable, please understand.