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
    • Web Gaming Platform
    • 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 434 results

  1. 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: https://hoc.codewards.org (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.
  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. 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.(https://codepen.io/raycast/pen/eYmvRoW) const renderer = new PIXI.autoDetectRenderer(); renderer.view.id = '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(https://codepen.io/duhaime/pen/YaRaNX) 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.
  4. 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?
  5. 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
  6. Hi everyone! I am going to load sound file in vue-pixi. I have no way to do this! Please help me. Thanks
  7. 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.
  8. 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.
  9. 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😉
  10. 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
  11. 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.
  12. 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.
  13. 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,
  14. 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); } this.mainContainer.children.map((item) =>{ //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 }
  15. 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
  16. NMN

    Brush Blur

    Hi All, I'm trying to implement a paint brush blur filter similar to the brush displacement filter here: https://codepen.io/PavelLaptev/pen/aLVbxG . Could anyone point me in the right direction? Thanks!
  17. 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.
  18. 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?
  19. 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)));
  20. 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.
  21. 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.
  22. Hi I'm trying to add onscreen buttons to move my sprite around my website. https://alfielytorres.github.io/hackercastle/ 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(); kb.watch(app.view); ..... }); ... //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; }
  23. 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); TweenMax.to(testGraphic, 1, {pixi: {alpha: 0}}); app.render(stage);
  24. 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 : http://type76.com 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 itch.io page if there is the will. You're welcome to join the discord server : https://discord.gg/KUqcuWu 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?
  25. 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: https://github.com/Alan01252/pixi-tilemap-tutorial