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
    • Coding and Game Design
  • Frameworks
    • Phaser 3
    • Phaser 2
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Website URL





Found 420 results

  1. 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
  2. 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!
  3. 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.
  4. 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?
  5. 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)));
  6. 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.
  7. Is there a way for PixiJS (or any plugin/script) to return the color value of a sprite if given a point value to check? What I'd like to do is create a collision map, which would be a large sprite with nothing but black and white shapes. This sprite would be on it's own layer underneath a painted background image. a character sprite would move around on a layer above, and any time the edges of it collides with a black part of the collision map, it would hit a wall.
  8. Hi I'm trying to add onscreen buttons to move my sprite around my website. right now my code is as follows //load keyboard class Keyboard { constructor() { this.pressed = {}; } watch(el) { el.addEventListener('keydown', (e) => { this.pressed[e.key] = true; }); el.addEventListener('keyup', (e) => { this.pressed[e.key] = false; }); } app.loader.load((loader, resources) => { // create a new keyboard instance let kb = new Keyboard();; ..... }); ... //Jumping if (characterPosition.vy < 0) { characterPosition.y += characterPosition.vy; } if (!kb.pressed.ArrowUp && touchingGround && characterPosition.jumped) { characterPosition.jumped = false; } if (kb.pressed.ArrowUp && touchingGround && !characterPosition.jumped) { characterPosition.vy = -19; characterPosition.jumped = true; } //Right if (kb.pressed.ArrowRight) { characterPosition.direction = 0; characterPosition.vx = Math.min(8, characterPosition.vx + 2); } if (characterPosition.vx > 0) { characterPosition.vx -= 1; } //Left if (kb.pressed.ArrowLeft) { characterPosition.direction = 1; characterPosition.vx = Math.max(-8, characterPosition.vx - 2); } if (characterPosition.vx < 0) { characterPosition.vx += 1; }
  9. Hello, First time posting on this forum. Issue: I am having issues using TweenMax when rendered in WebGL with PIXI. Nothing happens at all. If I change my code to use canvas it works just fine. Is anybody having similar or the same issues? Thanks for any help. let app = new PIXI.autoDetectRenderer(1920, 1080); document.body.appendChild(app.view); let stage = new PIXI.Container(); let testGraphic = new PIXI.Graphics(); testGraphic.beginFill(0x18FF10); testGraphic.drawRect(0, 0, 500, 500); stage.addChild(testGraphic);, 1, {pixi: {alpha: 0}}); app.render(stage);
  10. Hi, I'm a designer and I'd like to reach out to others for input or even collaboration. Lots of my javascript work is on github in the spirit of sharing and learning together. Like an open source sketchbook. I like making small experiments that might be included in something bigger. I often play with mechanics, audio and visual elements to look for interesting things : As you can see, it's lots of generated, three.js and canvas stuff, with a game dev leaning. I'm keen to go in new directions too. It's hard to find interest among my social circles, so I'm reaching out here to see if people are into this kind of thing. It's not business. It's about hitting ideas off each other, collaboration, fun and learning together. Maybe we can make an page if there is the will. You're welcome to join the discord server : I'd love to see your experiments. Here or on discord. Things that aren't full games, but are fun and interesting concepts. This seems the place to look for like minded folks. Have you got a sketchbook? Is there a good CMS for this? I might be doing it wrong. Are there any other communities for this apart from discord servers full of revshare projects?
  11. I am creating a game, where a lot of tiles need to be rendered. My goal is to render with this method at least 500k tiles. Since the tiles won't be redrawn every time but moved, this method should work out. I am using the pixi-tilemap library to create a fast & simple renderer to render a dynamic tilemap. The renderer approves itself to work, but .position.set seems to pull the tilemap from the interface away. I know, the function .position.set does not contain the same parameters as the one of the demo, however this function also does not work with the parameters of the demo. Some parameters must be added. The tutorial I have been using this classic demo:
  12. I’m building a SPA (vue js + vue router) combined with some pixi js (v4.8). The main features I use are : - image sprites - video sprites - some pixi texts - displacement filters Depending on the view, there may or may not be a canvas/renderer. But I always cleanup after myself before switching views by : - destroying every sprite and their baseTexture (image, video, filter sprite) -> .destroy(true) - destroying every text and their baseTexture -> .destroy(true) - clearing any filters used -> container.filters = null - and finally destroying the main renderer -> renderer.destroy(true) By doing so, my SPA is running smoothly (chrome, firefox, edge), no matter how many view switches occurs, and I don't get any console errors. However, safari (12.0.3 in my case) simply doesn't seem to take any cleanup seriously, after 4/5 views switching the performance drastically drops and I get many console errors : _There are too many active WebGL contexts on this page, the oldest context will be lost._ and _WebGL: INVALID_OPERATION: loseContext: context already lost_ . And if we continue browsing between views, safari will be forced to crash. Even if I manually try to kill my renderers with _gl.getExtension('WEBGL_lose_context').loseContext()_ , the problem remains. Am I missing something or is it just the way Garbage Collection works in safari (being less effective, and not properly releasing memory)?
  13. 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?
  14. Hello. I'm making example filter with custom fragment shader. This is what I have in terms of shader code so far: //fragShader struct SomeInfo { vec4 color; }; uniform SomeInfo c; void main() { gl_FragColor = c.color; } The idea is to (eventually) make c into an array of Infos, which would be then operated on by the shader. What I'm struggling with is the definition of filter: how do I declare the uniform to be of type SomeInfo in Js code? I assume in plain WebGL, I'd have to bind uniform location (of c's property) by calling gl.getUniformLocation(program, "c.color") and create a uniform with appropriate gl.uniform4f(location, /* bunch of values*/), but can I do something similar via the existing filters means? Relevant part of my Js code looks like this: //Define base filter class for our future shaders/filters PIXI.filters.CustomFilterBase = class CustomFilterBase extends PIXI.Filter { constructor({ vertexSrc = null, fragmentSrc = null, uniforms = {}, enabled = true, debug = false, name = null } = {}) { if(debug && fragmentSrc !== null) { fragmentSrc = "#define DEBUG \r\n" + fragmentSrc; } //Add dimensions for scaling uniforms.dimensions = { type: 'vec2', value: { x: 0.0, y: 0.0 } }; super(vertexSrc, fragmentSrc, uniforms); name ? this._name = name : this._name = "CustomFilterBase"; this.autoFit = false; this.enabled = enabled; } apply(filterManager, input, output) { this.uniforms.dimensions.x = input.sourceFrame.width; this.uniforms.dimensions.y = input.sourceFrame.height; // draw the filter... filterManager.applyFilter(this, input, output); } } //Shader for prototyping and testing PIXI.filters.TestFilter = class TestFilter extends PIXI.filters.CustomFilterBase { constructor() { let fragmentSrc = document.getElementById('fragShader').innerHTML; let uniforms = { //What do I do here?! c: { type: 'vec4', //Judging by GLSL_SINGLE_SETTERS, only GLSL's primitives are recognized value: new Float32Array([0.0, 1.0, 0.0, 1.0]) } }; super({ vertexSrc: null, fragmentSrc: fragmentSrc, uniforms: uniforms, name: 'testfilter' }); } } (using pixijs v4.8.7) The expected result is green screen, as it is if I declare c as vec4 in shader code, but alas the screen is black, hinting on c's value being default constructed / not properly assigned Any help is appreciated, cheers! P.S. I tried to find similar cases from this forum and stackoverflow, but it seems that few people use structs in GLSL code. P.P.S. If it is of any help, I found that PIXI.glCore.shader removes specific characters from uniform's name (which looks like a hotfix rather than a feature) and that in fact one of iterations uniformData's name is 'c.color'. /** * Extracts the uniforms * @class * @memberof PIXI.glCore.shader * @param gl {WebGLRenderingContext} The current WebGL rendering context * @param program {WebGLProgram} The shader program to get the uniforms from * @return uniforms {Object} */ var extractUniforms = function(gl, program) { var uniforms = {}; var totalUniforms = gl.getProgramParameter(program, gl.ACTIVE_UNIFORMS); for (var i = 0; i < totalUniforms; i++) { var uniformData = gl.getActiveUniform(program, i); var name =\[.*?\]/, ""); //<----- Here it is!! var type = mapType(gl, uniformData.type ); uniforms[name] = { type:type, size:uniformData.size, location:gl.getUniformLocation(program, name), value:defaultValue(type, uniformData.size) }; } return uniforms; };
  15. Looking to hire Pixi and Phaser developers for Noida location. Interested members please PM me or can send over the Resume to
  16. Hey guyz, Is there any editor I could use for proton particle
  17. hard75

    Pixi js editor

    Hi, i want to know if pixi js have a editor that it can to handle the graphic's pixi and it drag and set your position, this graphics: var app = new PIXI.Application(800, 600, { antialias: true }); document.body.appendChild(app.view); var graphics = new PIXI.Graphics(); // Rectangle graphics.beginFill(0xDE3249); graphics.drawRect(50, 50, 100, 100); graphics.endFill(); or i use tilemap editor but i don't know if tilemap edito can to handle graphic's pixi,
  18. I am trying to create a click through image gallery for a project in pixi. You can see in my fiddle when you click on the right side of the screen it adds the next image. The problem is when you click on the left to delete the image it will only delete one and not the rest. Can someone please help me with this issue. If you have any more questions, please feel free to ask. If there is a better solution please let me know. const createSprite = function() { imageCreated = true image = new Sprite(resources[images[step]].texture) image.width = 400; image.height = 300; image.x = left app.stage.addChild(image) step += 1 left += 40 } const removeSprite = function() { app.stage.removeChild(image) step -= 1 } loader.load((loader, resources) => { createSprite() }) nextTag.addEventListener("click", function() { console.log("next") createSprite() }) backTag.addEventListener("click", function() { console.log("back") removeSprite() })
  19. So I have loaded an array of images and added one to my stage. Basically I want to click through the image sprites that I have loaded with the left and right arrow keys. I thought about adding them all to the stage on top of each other and using z-index, but I feel like there would be a better way of filtering though all my loaded images. Plus I read through this documentation and was pretty confused implementing it. Here is my code so far. Its not much as I am new to pixi and still learning, but any information would be helpful. <script type="text/javascript"> let type = "WebGL" if(!PIXI.utils.isWebGLSupported()){ type = "canvas" } PIXI.utils.sayHello(type) // Aliases let Application = PIXI.Application, loader = PIXI.loader, resources = PIXI.loader.resources, Sprite = PIXI.Sprite; //Create a pixi application let app = new PIXI.Application({ width: 2000, height: 2000, transparent: false, antialias: true, resolution: 1 }) //Add the canvas that Pixi automatically created for you to the html document document.body.appendChild(app.view); loader .add([ "lib/book1.png", "lib/book2.png", "lib/book3.png", "lib/book4.png", "lib/book5.png" ]) .load(setup); //Define any variables that are used in more than one function let cam; // Setup function function setup() { // Creating cam sprite from image cam = new Sprite(resources["lib/book1.png"].texture ); cam.width = 400; cam.height = 300; app.stage.addChild(cam) </script>
  20. var imageContainer = new PIXI.Container(); PIXI.loader.add("").load(function(loader, resources){ var base = resources[''].texture.baseTexture; var maxWidth = 2048; var maxHeight = 2048; for (var x = 0; x < base.width; x += maxWidth){ for (var y = 0; y < base.height; y += maxHeight){ var minWidth = Math.min(maxWidth, base.width - x); var minHeight = Math.min(maxHeight, base.height - y); var canvas = document.createElement('canvas'); canvas.width = minWidth; canvas.height = minHeight; canvas.getContext('2d').drawImage(base.source, -x, -y); var texture = new PIXI.Texture( PIXI.BaseTexture.fromCanvas(canvas), new PIXI.Rectangle(x, y, minWidth, minHeight) ); var sprite = new PIXI.Sprite(texture); imageContainer.addChild(sprite); } } viewport.addChild(imageContainer); }); This is a silly question but i'm banging my head for an hour and can't figure it out I'm trying to split an image into smaller texture chunks but i'm getting frame does not fit inside base texture dimensions and i'm not sure why this is happening The image height is 3106 and after the second iteration of the inner loop the y is 2048 and minWidth = 1058 so it should work there is not third iteration of the inner loop to give out of bounds error ... Thanks for reading . also i'm not familiar with ES6 yet, so don't judge
  21. Hello! I'm trying to adapt shaders from this sample to Pixi JS custom filter: Unfortunately something is wrong with coordinates (though i'm using webgl code as a reference, but copy-paste to pixi doesn't work), i've tried this manual about Filter Area and this topic but it didn't help. maybe because in my case there is vertex shader also. Here is fiddle with my code where the problem exists Can someone explain how to do it right? ivan.popelyshev can you help me?
  22. We have atlas exported with Texture Packer. Run-time every texture is cropped by 1 pixel. This pixel is added to the opposite of the texture. Likewise
  23. Hey guys! I need to have my site working in Safari 9 and IE11 but I've noticed that there is ES6 code in the pixi.js bundle. Has anybody else encountered this? Looks like it's coming from the mini-signals dependency. I have tried adding pixi.js and mini-signals to my include config for babel-loader but it's still not being transpiled. Any ideas of a solution?
  24. Hi guys! New with PIXI and have some troubles with loading audio with PIXI.loader. startButton.on("pointerdown", function(){ changeLanguage('eng'); startAnimationBoard(); }); espButton.on("pointerdown", function(){ changeLanguage('esp'); startAnimationBoard(); }); function changeLanguage(lang){ if( lang == 'esp'){ sound.add('sceneLogo', './objects/mp3/esp/1.mp3') .add('scenePlay', './objects/mp3/esp/2.mp3') .add('sceneBalance', './objects/mp3/esp/3.mp3') .add('sceneHello', './objects/mp3/esp/4.mp3') .add('sceneInteractive', './objects/mp3/esp/5.mp3') .add('sceneAirport', './objects/mp3/esp/6.mp3') .add('sceneDownload', './objects/mp3/esp/7.mp3') .add('sceneData', './objects/mp3/esp/8.mp3') .add('scenePerson', './objects/mp3/esp/9.mp3') .add('sceneFinal', './objects/mp3/esp/10.mp3') .load(); } else if(lang == 'eng'){ sound.add('sceneLogo', './objects/mp3/eng/1.mp3') .add('scenePlay', './objects/mp3/eng/2.mp3') .add('sceneBalance', './objects/mp3/eng/3.mp3') .add('sceneHello', './objects/mp3/eng/4.mp3') .add('sceneInteractive', './objects/mp3/eng/5.mp3') .add('sceneAirport', './objects/mp3/eng/6.mp3') .add('sceneDownload', './objects/mp3/eng/7.mp3') .add('sceneData', './objects/mp3/eng/8.mp3') .add('scenePerson', './objects/mp3/eng/9.mp3') .add('sceneFinal', './objects/mp3/eng/10.mp3') .load(); } } Works perfect everywhere, except iOs Safari browser. Loading time from 300 ms on desktop Chrome to 1600 ms on old Droid phone (Chrome and Default browser). But mobile Safari loading time is awfull - 35000 ms. Tried to load files separatelly, one by one before using them (don't need them all at once). And still works everywhere except mobile Safari - in this case files didn't load at all. Don't know what I'm doing wrong. But I really tired in this war against Apple gadgets. Thank you! P.S. : iOs versions 10.1.x and 12.1.x
  25. Minus the choice. and adventure. Day Job is a delve into the mundane. Play the role of a generic office worker. What do you do? Work, slack, or consume. Once you finish your day at work a narrative will occur to your character. This is based on your character's personality. Whoa, that's right. Getting psychological up in here. We actually follow The Big Five Personality Traits and narratives and items both affect these traits. Some narratives require a certain range of trait values. The game itself is made using angular2pixi (found here) which we created to integrate Pixi into Angular2+. The code itself should be obfuscated, so no peeking BUT we are more than happy to answer any questions about the development of the game. Overall, making Day Job was a grandly satisfying endeavor and we hope to grow it into something great. The narratives in the game right now are placeholder while we work on the real story. We hope to cleverly explore the human condition and poke fun at capitalism, consumerism, and modern day wage slavery. If you'd like to follow our fledgling game studio or stay up to date on Day Job development make sure to subscribe to us on social media: Enjoy! Browser: Android: