Jump to content

Search the Community

Showing results for tags 'pixi'.

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

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

  1. Hi, when I set mesh.drawMode = PIXI.DRAW_MODES.POINTS, If I use TextureCoord for the coord, the texture is pixelated but with fragCoord.xy / Resolution.xy it's ok in the shader. what's the reason ?
  2. I'm trying to make a cellular automaton using Pixi.js, and so I want it as fast as possible. Each 2 by 2 square is a unit called a bug that looks like this: (without the outline). The top right and bottom left will always be the same color, so on start I currently create 3 sprites based on a white square, put one that covers the whole bug and then one in the upper and lower corner on top of it, create a new container, put these 3 sprites in it, and run a loop that does this and puts each new container in a 2d array that represents the board. Then on each update cycle, I cycle thru the array and for each bug that needs to change, I get its 3 children by id and change their tint. I am very new to Pixi, and to javascript for that matter. I've read thru the pixi API a lot trying to understand how it all works, but I'm not sure if I'm missing something in my methodology that may make it run faster. Any advice?
  3. I am creating a Rectangle and Adding it to the ViewPort with Code: var rectangle = new Graphics(); rectangle.beginFill(0, 0.001); rectangle.lineStyle(1, 0xFF0000); rectangle.drawRect(5, 5, 200, 100); rectangle.interactive = true; rectangle.buttonMode = true; rectangle.on('pointerdown', onDragStart) .on('pointerup', onDragEnd) .on('pointerupoutside', onDragEnd) .on('pointermove', onDragMoveRectangle); app.viewport.addChild(rectangle); after that I am creating a Sprite using the code and adding it to the rectangle. ( Its basically a handle to increase the width of Rectangle ) const textureMove = PIXI.Texture.from(horizontalMoveSVG); const sprite = new PIXI.Sprite(textureMove); sprite.interactive = true; sprite.buttonMode = true; sprite.width = 25; sprite.height = 25; sprite.anchor.set(0.5); sprite.x = 205; sprite.y = 50; sprite.on('pointerdown', onDragStart) .on('pointerup', onDragEnd) .on('pointerupoutside', onDragEnd) .on('pointermove', onDragMoveSprite); rectangle.addChild(sprite); rectangle.endFill(); the two functions are below: function onDragMoveRectangle() { if (this.dragging) { const newPosition = this.data.getLocalPosition(this.parent); // const newPosition = this.data.getLocalPosition(this.parent); this.x = newPosition.x; this.x = newPosition.y; } } function onDragMoveSprite() { if (this.dragging) { const newPosition = this.data.getLocalPosition(this.parent); // const newPosition = this.data.getLocalPosition(this.parent); this.width = newPosition.x; this.height = newPosition.y; } } Problem I am facing is: If I move Rectangle or a Sprite, both the drag functions got executed, which I don't want. I want to execute only 1 function when rectangle move and other function when the sprite moves. - onDragMoveRectangle will move the rectangle ( changing the position ) - onDragMoveSprite will increase the width and height of the rectangle
  4. Hello! We're a small studio looking to hire an amazing Javascript game developer to work on our upcoming RPG game. Our client is written in PixiJS and React, while the server side runs NodeJS with Colyseus for networking. Some of your initial work includes: - improving the networking in our existing Colyseus client-server setup - better tile culling so can have biggger maps in Pixi js - improved player collision detection - improved pathfinding - performance tweaking - better mobile support Work is full-time and ongoing, and pay will be bimonthly. If you're interested in working on a fun project, leave a reply here, send us a message, or write to us at [email protected] Pleased provide a link to your portfolio or resume and include salary expectations. Thank you!
  5. Hi, I am currently trying to generate the polyline example of OGL (v0.0.90) (https://oframe.github.io/ogl/examples/?src=polylines.html) with PIXI.js (v6.3.0). I have created a new PIXI.Mesh and created the appropriate shaders and buffers. Only at some point I'm stuck and don't know why no object is visible. Is it because of the change of the buffer values or does PIXI use a different coordinate reference? For the mathematical operations I use the Vec3 class from OGL, but I could change that later. Here is the code I wrote. import * as PIXI from 'pixi.js'; import * as OGL from "ogl"; const canvas = document.createElement('canvas'); canvas.id = 'stage'; canvas.width = window.innerWidth; canvas.height = window.innerHeight; const rendererOptions = { width: canvas.width, height: canvas.height, view: canvas, }; const stage = new PIXI.Container(); const renderer = new PIXI.Renderer(rendererOptions); renderer.backgroundColor = 0xff0000; document.body.appendChild(canvas); const vertexLines = ` attribute vec3 position; attribute vec3 next; attribute vec3 prev; attribute vec2 uv; attribute float side; uniform vec2 uResolution; uniform float uDPR; uniform float uThickness; vec4 getPosition() { vec2 aspect = vec2(uResolution.x / uResolution.y, 1); vec2 nextScreen = next.xy * aspect; vec2 prevScreen = prev.xy * aspect; vec2 tangent = normalize(nextScreen - prevScreen); vec2 normal = vec2(-tangent.y, tangent.x); normal /= aspect; normal *= 1.0 - pow(abs(uv.y - 0.5) * 1.9, 2.0); float pixelWidth = 1.0 / (uResolution.y / uDPR); normal *= pixelWidth * uThickness; // When the points are on top of each other, shrink the line to avoid artifacts. float dist = length(nextScreen - prevScreen); normal *= smoothstep(0.0, 0.02, dist); vec4 current = vec4(position, 1); current.xy -= normal * side; return current; } void main() { gl_Position = getPosition(); } `; const fragmentLines = /* glsl */ ` precision highp float; uniform vec3 uColor; varying vec2 vUv; void main() { gl_FragColor.rgb = uColor; gl_FragColor.a = 1.0; } `; const countPoints = 20; const polylines = [{ spring: 0.05, friction: 0.7, mouseVelocity: new OGL.Vec3(), mouseOffset: new OGL.Vec3(0.01), position: new Float32Array(countPoints * 3 * 2), prev: new Float32Array(countPoints * 3 * 2), next: new Float32Array(countPoints * 3 * 2), side: new Float32Array(countPoints * 1 * 2), uv: new Float32Array(countPoints * 2 * 2), index: new Uint16Array((countPoints - 1) * 3 * 2), tmp: new OGL.Vec3(), points: [], }]; polylines.forEach((polyline) => { // set static buffer values for (let i = 0; i < countPoints; i++) { polyline.side.set([-1, 1], i * 2); const v = i / (countPoints - 1); polyline.uv.set([0, v, 1, v], i * 4); if (i === countPoints - 1) continue; const ind = i * 2; polyline.index.set([ind + 0, ind + 1, ind + 2], (ind + 0) * 3); polyline.index.set([ind + 2, ind + 1, ind + 3], (ind + 1) * 3); } // set empty points for (let i = 0; i < countPoints; i++) polyline.points.push(new OGL.Vec3()); let geometry = new PIXI.Geometry(); geometry.addAttribute('position', new PIXI.Buffer(polyline.position, false, false), 3, false); geometry.addAttribute('prev', new PIXI.Buffer(polyline.prev, false, false), 3, false); geometry.addAttribute('next', new PIXI.Buffer(polyline.next, false, false), 3, false); geometry.addAttribute('side', polyline.side, 1, false); geometry.addAttribute('uv', polyline.uv, 2, false); geometry.addIndex(polyline.index); let shader = PIXI.Shader.from(vertexLines, fragmentLines, { uColor: { value: new OGL.Color('#fff') }, uThickness: { value: 50 }, uResolution: { value: new OGL.Vec2() }, uDPR: { value: 1 }, uMiter: { value: 1 } }); let mesh = new PIXI.Mesh( geometry, shader ); polyline.mesh = mesh; stage.addChild(mesh); }); // Add handlers to get mouse position const mouse = new OGL.Vec3(); if ('ontouchstart' in window) { window.addEventListener('touchstart', updateMouse, false); window.addEventListener('touchmove', updateMouse, false); } else { window.addEventListener('mousemove', updateMouse, false); } function updateGeometry(polyline) { console.log(mouse); polyline.points.forEach((p, i) => { p.toArray(polyline.position, i * 3 * 2); p.toArray(polyline.position, i * 3 * 2 + 3); if (!i) { // If first point, calculate prev using the distance to 2nd point polyline.tmp.copy(p).sub(polyline.points[i + 1]).add(p); polyline.tmp.toArray(polyline.prev, i * 3 * 2); polyline.tmp.toArray(polyline.prev, i * 3 * 2 + 3); } else { p.toArray(polyline.next, (i - 1) * 3 * 2); p.toArray(polyline.next, (i - 1) * 3 * 2 + 3); } if (i === polyline.points.length - 1) { // If last point, calculate next using distance to 2nd last point polyline.tmp.copy(p).sub(polyline.points[i - 1]).add(p); polyline.tmp.toArray(polyline.next, i * 3 * 2); polyline.tmp.toArray(polyline.next, i * 3 * 2 + 3); } else { p.toArray(polyline.prev, (i + 1) * 3 * 2); p.toArray(polyline.prev, (i + 1) * 3 * 2 + 3); } }); polyline.mesh.geometry.getBuffer('position').update(polyline.position); polyline.mesh.geometry.getBuffer('prev').update(polyline.prev); polyline.mesh.geometry.getBuffer('next').update(polyline.next); } function updateMouse(e) { if (e.changedTouches && e.changedTouches.length) { e.x = e.changedTouches[0].pageX; e.y = e.changedTouches[0].pageY; } if (e.x === undefined) { e.x = e.pageX; e.y = e.pageY; } // Get mouse value in -1 to 1 range, with y flipped mouse.set((e.x / renderer.width) * 2 - 1, (e.y / renderer.height) * -2 + 1, 0); } function update() { updateId = requestAnimationFrame(update.bind(this)); polylines.forEach((polyline) => { for (let i = polyline.points.length - 1; i >= 0; i--) { if (!i) { // For the first point, spring ease it to the mouse position polyline.tmp.copy(mouse).add(polyline.mouseOffset).sub(polyline.points[i]).multiply(polyline.spring); polyline.mouseVelocity.add(polyline.tmp).multiply(polyline.friction); polyline.points[i].add(polyline.mouseVelocity); } else { // The rest of the points ease to the point in front of them, making a line polyline.points[i].lerp(polyline.points[i - 1], 0.9); } } updateGeometry(polyline); }); renderer.render(stage); }; function resize() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; renderer.resize(canvas.width, canvas.height); polylines.forEach((polyline) => { if (polyline.resolution) polyline.resolution.value.set(canvas.width, canvas.height); if (polyline.dpr) polyline.dpr.value = renderer.resolution; }); } resize(); window.addEventListener('resize', resize.bind(this)); let updateId = 0; update();
  6. I am trying to create text that can be seen by screen readers in Pixi.js. My code looks like the following. And, when I press tab, an element is created on top of the canvas. But the problem is that the element is a button element. I would like for it to create a paragraph or heading element. If I'm doing something wrong please let me know. var pixiText = new PIXI.Text('This is from PIXI.Text', { font: '50px Arial', fill: 'red' }); pixiText.accessible = true; pixiText.interactive = true;
  7. Hi, I'm on Pixi current days. I was so amazed when I saw this animation : https://art4globalgoals.com/en So, I tried to clone the brush masking effect. I succeed to make a mask, make brush effect. The problem is that, I can't remove current brush sprite. I tried to console log my app, stage, renderer, but I can't find where my sprite is registered (sorry for the terminology, Im wondering im using right terminology).... Also, is there any way to trigger dragging event? , above the link, there seems to appear brush scratch effect automatically, but is there any idea about this? ```` import * as PIXI from 'pixi.js'; import { Point } from '@pixi/math'; const screenSize = { width: window.innerWidth, height: window.innerHeight }; let brushWidth = (window.innerHeight / window.innerWidth) * 150; let brushHeight = (window.innerHeight / window.innerWidth) * 200; const app = new PIXI.Application({ width: window.innerWidth, height: window.innerHeight, resolution: window.devicePixelRatio, autoDensity: true }); document.body.appendChild(app.view); app.loader .add('background', '/jpeg/mask.jpeg') .add('mask', '/png/effel-gray.png') .add('bristle1', '/png/brush6.png') .add('bristle2', '/png/bristle2.png') .load(() => { setup(); }); const setup = () => { const brushTexture = app.loader.resources.bristle1.texture; const brush = new PIXI.Sprite(brushTexture); brush.width = brushWidth; brush.height = brushHeight; brush.anchor.set(0.5,0.5); const backgroundTexture = app.loader.resources.background.texture; const maskTexture = app.loader.resources.mask.texture; const background = new PIXI.Sprite(backgroundTexture); background.x = app.renderer.screen.width / 2; background.y = app.renderer.screen.height / 2; background.anchor.x = 0.5; background.anchor.y = 0.5; background.width = window.innerWidth; background.height = window.innerHeight; const mask = new PIXI.Sprite(maskTexture); mask.width = app.renderer.screen.width; mask.height = app.renderer.screen.height; mask.x = app.renderer.screen.width / 2; mask.y = app.renderer.screen.height / 2; mask.anchor.x = 0.5; mask.anchor.y = 0.5; mask.width = window.innerWidth; mask.height = window.innerHeight; app.stage.addChild(mask); app.stage.addChild(background); const renderTexture = PIXI.RenderTexture.create(app.screen.width, app.screen.height); const renderTextureSprite = new PIXI.Sprite(renderTexture); app.stage.addChild(renderTextureSprite); background.mask = renderTextureSprite; app.stage.interactive = true; app.stage.on('pointerdown', pointerDown); app.stage.on('pointerup', pointerUp); app.stage.on('pointermove', pointerMove); let dragging = false; const originVector = new Point(1, 0); let vector; function pointerMove(event) { if (dragging) { brush.position.copyFrom(event.data.global); const originPos = { x : event.data.global.x - window.innerWidth / 2, y : -(event.data.global.y - window.innerHeight / 2) } const vx = originPos.x; const vy = originPos.y; vector = new Point(vx, vy); vector = normalizeVector(vector); const dotProd = (vector.x * originVector.x) + (vector.y * originVector.y); const angle = Math.acos(dotProd); const rotationMatrix = new PIXI.Matrix() rotationMatrix.rotate(angle); brush.rotation = angle; app.renderer.render( brush, { renderTexture, clear: false }, false, null, false ); } } function pointerDown(event) { dragging = true; pointerMove(event); } function pointerUp(event) { dragging = false; brush.width = brushWidth; console.dir(app.renderer) app.renderer.managedTextures[4].destroy(); } window.addEventListener('resize', () => { screenSize.width = window.innerWidth; screenSize.height = window.innerHeight; app.renderer.resize(window.innerWidth, window.innerHeight); app.renderer.stage.width = window.innerWidth; app.renderer.stage.height = window.innerHeight; }); }; const getMagnitude = (x , y) => { return Math.sqrt(x*x + y*y); } const normalizeVector = (vector) =>{ const magnitude = getMagnitude(vector.x , vector.y); vector.x /= magnitude; vector.y /= magnitude; return vector; } `````
  8. Hey, I'm trying to create a draggable line point much like in this post I was hoping that a solution was created since then, but haven't been able to find it if so.
  9. Hello! I have a sprite with a fully transparent texture. I want to make it glow. I tried to achieve this with filters, but most of them do not work for such a sprite. Only CrossHatchFilter and GodRayFilter work. GodRayFilter is very nice and would suit me, but it creates a black background around the sprite. Is there any way to highlight such a sprite? I also tried pixi-heaven from this example https://pixijs.io/examples/#/plugin-heaven/spineboy-pro.js. But it also doesn't work for a sprite with a transparent texture.
  10. Hello ?! I am experimenting with making a split screen multiplayer game, using a game engine backed by PIXI, GDevelop. To do so, I'm moving the "camera" (the root Container's position) to center each player and render the root container into a sprite, each sprite being a player's screen. To do the rendering, I've used code that looks like this (simplified for readability and to contain only the PIXI code, not the engine specific one) that runs every frame of the game: const source = the root PIXI Container; const width, height = the viewport width & height; const renderTarget = a PIXI sprite; global.rt = (global.rt || RenderTexture.create({ width, height })); global.sprite = (global.sprite || Sprite.from(global.rt)); if(!renderTaget.texture instanceof RenderTexture) renderTarget.texture = RenderTexture.create({ width, height }); renderer.render(source, { renderTexture: global.rt }); renderer.render(global.sprite, { renderTexture: renderTarget.texture });  The texture of the render target seems to be replaced, but it seems to be transparent (or the background color), no messages in the console, but after a few dozens of seconds the webgl context is lost. The more renders the quicker, so i am guessing it has something to do with the amount of times i do the rendering. Does anyone have some pointers about what i may have done wrong? Thanks
  11. Hello there ! I'm currently working on some optimizations for a project that shows a large view that can be scrolled using a native wheel event on the canvas. This is working as expected without using the wheel event of the Event System. However, when looking at the flame chart, a onWheel event is thrown by the EventSystem, and does hit testing and other things that I don't need. How can I stop this event from happening ?
  12. Website Link I have been learning PixiJs for some time now, and recently I wanted to put everything I learned into one small project to deepen my understanding of it. And it happened that I was playing the great game "Night in the Woods", so I decided to make a 2D side-scroller web app with the same feel and look of the game and can be used as the game promotional website. As I said earlier, I am not experienced in Pixi.js, so there has been many obstacles and TONS of refactoring along the way. Initially, I started building the app with vanilla JavaScript, then it became clear that TypeScript would be a much better option. Finding the appropriate project structure proved to be a much harder thing than I thought it would be, and I wished that there was some general structure or "template" online that I could have used as the base for my project. In the beginning, I thought about using a proper game engine ( as Phaser ) instead of the more general purposed rendering engine Pixi.Js, but I continued with it because I wanted to have a deeper understanding about the basics and lower-level stuff, then I may go to a full games engine. It was very hard at times, and many basic features are not implemented ( like multi-animations sprite ), but at the same time it was very informative ( and fun ). I uploaded the project code on Github for anyone interested: Github Repo I would love to hear your feedback and opinions.
  13. I am trying to do something very simple with PIXI and Typescript. I decided to switch to using texture packer from loading individual png files and ran into this issue. The issue is when trying to access the texture that is loaded through the spritesheet json file I get a promise error. The code is very simple and I have tried various ways of doing this with no luck. This example is the simplest and uses the example from CodeAndWeb (Texture packer devs site) but in an attempt to translate it to typescript and separated the functionality a bit. Any advice is highly appreciated. Thanks. import { Container, Sprite, Graphics, Texture, Spritesheet } from "pixi.js"; import * as PIXI from "pixi.js"; // This example is based on the following // https://www.codeandweb.com/texturepacker/tutorials/how-to-create-sprite-sheets-and-animations-with-pixijs5 export class Game extends Container { static GAME_WIDTH = 320; static GAME_HEIGHT = 568; private static _instance: Game; public app: PIXI.Application | undefined; constructor() { super(); window.onload = (): void => { this.createRenderer(); this.addAssets(); this.startLoadingAssets(); }; console.log('Game Constructed'); } public static getInstance(): Game { if (!Game._instance) { Game._instance = new Game(); } return Game._instance; } private addAssets(): void { PIXI.Loader.shared.add('game', '../assets/game.json'); console.log('Assets added'); } private startLoadingAssets(): void { PIXI.Loader.shared.onComplete.add(() => { this.onAssetsLoaded(); }); // PIXI.Loader.shared.onComplete.add(this.onAssetsLoaded); PIXI.Loader.shared.load(); console.log('Loading assets'); } private onAssetsLoaded(): void { let sprite = new PIXI.Sprite(PIXI.Texture.from("backBoard.png")); // let sheet = PIXI.Loader.shared.resources["../assets/game.json"]; // let sprite = new PIXI.Sprite(sheet.texture['backBoard,png']); // this.app?.stage.addChild(sprite); console.log('AssetsLoaded'); } private createRenderer(): void { this.app = new PIXI.Application({ backgroundColor: 0x001320, }) document.body.appendChild(this.app.view); console.log('Renderer Created'); } public initialize(): void { console.log('Game initialized'); } } json looks like this {"frames": { "backBoard.png": { "frame": {"x":1,"y":1,"w":318,"h":442}, "rotated": false, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":318,"h":442}, "sourceSize": {"w":318,"h":442} }, "buttonDisabled.png": { "frame": {"x":321,"y":340,"w":30,"h":30}, "rotated": false, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":30,"h":30}, "sourceSize": {"w":30,"h":30} }, "buttonDown.png": { "frame": {"x":353,"y":344,"w":30,"h":30}, "rotated": false, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":30,"h":30}, "sourceSize": {"w":30,"h":30} }, "buttonSmallDisabled.png": { "frame": {"x":395,"y":224,"w":22,"h":22}, "rotated": false, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":22,"h":22}, "sourceSize": {"w":22,"h":22} }, "buttonSmallDown.png": { "frame": {"x":395,"y":248,"w":22,"h":22}, "rotated": false, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":22,"h":22}, "sourceSize": {"w":22,"h":22} }, "buttonSmallUp.png": { "frame": {"x":395,"y":272,"w":22,"h":22}, "rotated": false, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":22,"h":22}, "sourceSize": {"w":22,"h":22} }, "buttonUp.png": { "frame": {"x":321,"y":372,"w":30,"h":30}, "rotated": false, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":30,"h":30}, "sourceSize": {"w":30,"h":30} }, "coin.png": { "frame": {"x":368,"y":311,"w":31,"h":33}, "rotated": true, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":31,"h":33}, "sourceSize": {"w":31,"h":33} }, "logo.png": { "frame": {"x":321,"y":213,"w":125,"h":45}, "rotated": true, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":125,"h":45}, "sourceSize": {"w":125,"h":45} }, "meter_big.png": { "frame": {"x":321,"y":100,"w":92,"h":47}, "rotated": false, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":92,"h":47}, "sourceSize": {"w":92,"h":47} }, "meter_small.png": { "frame": {"x":368,"y":213,"w":43,"h":25}, "rotated": true, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":43,"h":25}, "sourceSize": {"w":43,"h":25} }, "meterDisplay.png": { "frame": {"x":321,"y":149,"w":89,"h":49}, "rotated": false, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":89,"h":49}, "sourceSize": {"w":89,"h":49} }, "meterDisplayBig.png": { "frame": {"x":321,"y":1,"w":97,"h":97}, "rotated": false, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":97,"h":97}, "sourceSize": {"w":97,"h":97} }, "meterMinus.png": { "frame": {"x":368,"y":258,"w":25,"h":25}, "rotated": false, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":25,"h":25}, "sourceSize": {"w":25,"h":25} }, "meterPlus.png": { "frame": {"x":368,"y":285,"w":24,"h":24}, "rotated": false, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":24,"h":24}, "sourceSize": {"w":24,"h":24} }, "peg.png": { "frame": {"x":399,"y":200,"w":11,"h":22}, "rotated": false, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":11,"h":22}, "sourceSize": {"w":11,"h":22} }, "target_guide.png": { "frame": {"x":321,"y":200,"w":11,"h":76}, "rotated": true, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":11,"h":76}, "sourceSize": {"w":11,"h":76} }}, "meta": { "app": "https://www.codeandweb.com/texturepacker", "version": "1.0", "image": "cheenko.png", "format": "RGBA8888", "size": {"w":419,"h":444}, "scale": "1", "smartupdate": "$TexturePacker:SmartUpdate:507f67780e7f85c65d491493063f25f9:181b9d624fffd3a88b16c67d21e19ad7:3dbd62212b1a89304e8d06008f40f33d$" } } Code Sandbox link https://codesandbox.io/s/empty-hooks-9g8j6?file=/src/index.ts
  14. Hello everyone, I have struggled all day long to create a simple filled circle using Shaders. I succeed creating triangle and square thanks to Pixi example. My approach is the following one : Creating a square and hide some pixels using discard in fragment. const geometry = new PIXI.Geometry().addAttribute("aVertexPosition", [100, 100, -100, 100, -100, -100, 100, -100, 200, 200], 2).addIndex([0, 1, 2, 0, 2, 3]); const shader = PIXI.Shader.from(` 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); } `, ` precision mediump float; uniform vec2 u_resolution; uniform vec2 u_mouse; uniform float u_time; void main() { vec2 coord = gl_FragCoord.xy; // vec2 st = gl_FragCoord.xy/u_resolution; // float pct = 0.0; // a. The DISTANCE from the pixel to the center // pct = distance(st,vec2(0.5,0.5)); // if (pct > RADIUS) discard; gl_FragColor = vec4(coord.x, coord.y, 1, 1); } `); const circle = new PIXI.Mesh(geometry, shader); circle.position.set(400, 300); app.stage.addChild(circle); Issues : - In my example, i'm just trying to display my square with differents colored depending on position => Why the square is still white ? coord.x seems to be very high (around 100000000000) leading the color to be always vec4(1, 1, 1, 1). - When calculating the distance, what is the center of the circle ? If someone already face this issue, a little help would be really appreciated. Thank you in advance. Have a good day.
  15. Hello I have an application where i need to display approximately 1000 elements (with 5 main shapes and dynamic colors). I have think at several different approach : - Using only Graphics but as it is says in the documentation (Using 300 or more graphics objects can be slow, in this instance use sprites, if you can create a texture to share between them.) - Using Sprites from Textures from Graphic (the problem of this approach it that i have elements colored dynamically, and i'm not able to generate a Texture from a Graphic => I don't want to use either @pixi/canvas-graphics) - Using Shaders I don't have any overview regarding shaders performances. Is it better than Sprites ? than Graphics ? I would like to make the right decision in terms of performances and good practices. Thank you in advance. Have a good day !
  16. Hello everyone! I founded solution with correct croping images/videos inside PIXI app. I created test appliction and made some hacks inside pixi-legacy.js and it successfully works for me. When I started implement it inside npm module I found it not so easy. Tryed a lot of everything but still have no luck. Could somebody explain me how correctly hack PIXI and make it work as NPM module? Do I need make some module extensions? My current code definetly cause some core changes because I entered 3 new parameters. So how can I put it all together? Bellow my code: Inside this function FilterSystem.prototype.push = function (target, filters) I added 3 new parameters under "var autoFit = filters[0].autoFit;" : var autoFit = filters[0].autoFit; var autoFitY = filters[0].autoFitY; var autoFitWidth = filters[0].autoFitWidth; var autoFitHeight = filters[0].autoFitHeight; After if(autoFit){...} I wrote this code: //Autofit by height if (autoFitY) { var sourceFrameProjected = this.tempRect.copyFrom(renderTextureSystem.sourceFrame); // Project source frame into world space (if projection is applied) if (renderer.projection.transform) { this.transformAABB(tempMatrix.copyFrom(renderer.projection.transform).invert(), sourceFrameProjected); } state.sourceFrame.fitY(sourceFrameProjected, autoFitWidth, autoFitHeight); } Also I wrote this function. You can add it under Rectangle.prototype.fit = function (rectangle) : /** * Fits by height with determined width and height. * * @param {PIXI.Rectangle} rectangle - The rectangle to fit. * @return {PIXI.Rectangle} Returns itself. */ Rectangle.prototype.fitY = function (rectangle, width, height) { this.x = (rectangle.width - width)/2; this.y = Math.max(this.y, rectangle.y); this.width = width; this.height = height; return this; };
  17. Hello everyone! Maybe someone has experience and can share with it. The question is how you guys croping media content inside PIXI Application. I have a lot of different stock video and images with different sizes. User can choose aspect ratio of final result: landscape (1920x1080), square (1080x1080), vertical (607,5x1080). The size of main container always is 1920x1080. Also there should be good resolution, let`s say: PIXI.settings.RESOLUTION = 2; I made some images to demonstrate how I want to make it. For example, user can choose vertical ratio and with horizontal hd video (or hd image) - so video (image) should be cropped, and around this video (image) should be for example black (or can be else) color. My code is: const video = some_json_data; const videoContainer = document.getElementById('videoContainer'); switch (video.aspectRatio){ case "square": vw = 1080; vh = 1080; break; case "landscape": vw = 1920; vh = 1080; break; case "vertical": vw = 607.5; vh = 1080; break; default: break; } const bgColor = '0x000000'; PIXI.settings.RESOLUTION = 2; app = new PIXI.Application({ width: vw, height: vh, backgroundColor: bgColor, }); videoContainer.appendChild(app.view); const renderer = PIXI.autoDetectRenderer({ width: vw, height: vh, resolution: 2 }); renderer.view.style.width = `${vw}px`; renderer.view.style.height = `${vh}px`; // create the root of the scene graph const stage = new PIXI.Container(); app.stage.addChild(stage); videoBg = PIXI.Texture.from(videoUrl); videoSprite = new PIXI.Sprite(videoBg); const videoController = videoSprite._texture.baseTexture.resource.source; app.stage.addChild(videoSprite); videoBg.baseTexture.resource.source.loop = false; videoBg.baseTexture.resource.autoPlay = false; // Width videoSprite.width = vw; videoSprite.height = vh; // move the sprite to the center of the screen videoSprite.alpha = 1; videoSprite.anchor.set(.5); videoSprite.x = app.screen.width / 2; videoSprite.y = app.screen.height / 2; app.ticker.add(function () { // render the stage renderer.render(stage); });
  18. Hello all, thanks for taking time to read my post. I have an app where users draw shapes in an SVG editor to create objects. Then the shapes are rendered in Pixi to create an animation. We used to do the animation in SVG land but Pixi has better performance. The main issue I'm having right now is my rounded rect corners are not coming out smooth when I try to display in Pixi via the Graphics object, and we have also tried to rasterize the SVG to an image. This is the SVG editor where users create shapes and place them to create objects And this is what Pixi is rendering via the Graphics object. Here is how I init the Pixi App. ``` this.app = new PIXI.Application({ resolution: window.devicePixelRatio, antialias: true, autoDensity: true, width: this.elRef.current.clientWidth, height: this.elRef.current.clientHeight, backgroundColor: 0x666666, })``` and to draw each shape shapes.forEach(shape => { let { color, opacity, width, length, borderRadius, borderThickness, borderColor, x, y } = shape color = PIXI.utils.string2hex(color) x = centerX + x - width / 2 y = centerY + y - length / 2 Gfx.beginFill(color, opacity) Gfx.lineStyle(borderThickness, borderColor) Gfx.drawRoundedRect(x, y, width, length, borderRadius) Gfx.endFill() }) let texture = this.app.renderer.generateTexture(Gfx) Thanks again for any help! EDIT: Originally I was using a raterize approach, where I would render the SVG element into an `<img/>` tag, but it was also giving blurry results. SVG RASTERIZE VERSION Here is example code for this let svg = ( <svg width={totalWidth} height={totalLength} // x={isPerson ? 35 : 0} // y={isPerson ? -35 : 0} viewBox={isPerson ? `0 0 ${172} ${172}` : null} xmlns='http://www.w3.org/2000/svg' > <defs>{patterns}</defs> <rect className='rect single-resizer' width={width} height={length} x={leftAdj} // strokeWidth / 2 y={topAdj} // strokeWidth / 2 opacity={__typename === 'Zone' ? '0.5' : '1'} fill={color} style={{ strokeWidth: __typename === 'Structure' ? 0 : borderThickness, // borderThickness, stroke: '#000000', }} /> let svgRender = ReactDOMServer.renderToStaticMarkup(svg) let blob = new Blob([svgRender], { type: 'image/svg+xml' }) let url = URL.createObjectURL(blob) var img = new Image() img.src = url //nd then making my texxture const base = new PIXI.BaseTexture(img) let texture = new PIXI.Texture(base)
  19. Freckles

    Input in PIXI

    From what I've read I need PIXI text input plugin to use that feature. I need to write input text module as I don't want to use plugins. I'd be thankful if you help me out to understand if I can use HTML tags in Pixi.js somehow (Everything's build up on canvas, and I haven't seen any example this far that does so, maybe I'm missing sth) if not could you provide some resources that can help me figure it out? Are there any finished components I can use or do I need to write anything from scratch? (not only input related but also buttons and stuff like that) Thanks in advance!
  20. Hey guys! I need to add a UID to my headers for getting Texture (video or images). Is there any way to do this in PIXI? For example: PIXI.Texture.from(testVideo, {header: { 'UID': 'XXX' }}); I also tryed PIXI.Texture.fromUrl but had the same result.
  21. I had made a codePen demo to show this case(and 2 screen-capture-images below) https://codepen.io/tomleader/pen/jOmNWJG There are 3 buttons(click to see the result) 1. use img: The most common way , sprite.from(imgUrl), everything is ok! 2. use buffer: a little tricky.. the process is [new a Image obj and set src=url, draw Image to another canvas, getImageData from canvas, make a texture from imgData buffer, sprite.from(texture)], and the result seems weird! 3. use dataUrl: the process is [new a Image obj and set src=url, draw Image to another canvas, canvas.toDataURL, make a texture from dataURL, sprite.from(texture)], and the result seems ok! So I think maybe the fromBuffer(imgdata) lost some pixels opacity data? OR I have some mistakes in my code? Any suggestions? Thanks ..
  22. Many of my games I implant logic to only render when dirty. My UI code sets a dirty flag when ever anything changes rather than every possible frame. Most of my games are card games for mobile and there no constant animation, only when moving a card. I have done this with the goal to keep the device cool and not burn the battery. Players can be on for long periods of time. Is this solution overkill or does pixijs or phaser already optimize non changing frames?
  23. Hi, I just joined this form and am very new to the webgl development, so my apologies in advance if this is a question that does not really make sense. I am currently trying to use PIXI.js with a third party data visualization library. One of the classes in this third party library provides a way to customize the way it renders graphics. In the sample application, they do this by writing a raw webgl but I would love to do this using PIXI.js if possible. This class passes webgl context (this.context) so we can do something like below. const gl = this.context; // webgl context used by the third party library const vs = gl.createShader(gl.VERTEX_SHADER); ... So to use this context in PIXI.js, I tried const renderer = new PIXI.Renderer({ context: this.context, clearBeforeRender: false }) ... However, after I called renderer.render(stage), I see some graphics (what I drew using PIXI.Graphics) for an instance and I lost all of them.. I see a bunch of error logs in the developer console. 2core.js:6180 unsupported index buffer type: uint32 push../node_modules/@pixi/core/dist/esm/core.js.GeometrySystem.draw @ core.js:6180 push../node_modules/@pixi/graphics/dist/esm/graphics.js.Graphics._renderDrawCallDirect @ graphics.js:2962 push../node_modules/@pixi/graphics/dist/esm/graphics.js.Graphics._renderDirect @ graphics.js:2947 push../node_modules/@pixi/graphics/dist/esm/graphics.js.Graphics._render @ graphics.js:2861 push../node_modules/@pixi/display/dist/esm/display.js.Container.render @ display.js:1797 push../node_modules/@pixi/display/dist/esm/display.js.Container.render @ display.js:1800 push../node_modules/@pixi/display/dist/esm/display.js.Container.render @ display.js:1800 push../node_modules/@pixi/core/dist/esm/core.js.Renderer.render @ core.js:10290 tilesChanged @ data.ts:122 a.<computed> @ Accessor.js:5 update @ BaseLayerViewGL2D.js:5 processUpdate @ LayerView2D.js:5 _updateLayerView @ FrameTask.js:5 forEach @ Collection.js:5 update @ FrameTask.js:5 (anonymous) @ scheduling.js:5 forAll @ PooledArray.js:5 x @ scheduling.js:5 j @ scheduling.js:5 requestAnimationFrame (async) j @ scheduling.js:5 requestAnimationFrame (async) j @ scheduling.js:5 requestAnimationFrame (async) j @ scheduling.js:5 requestAnimationFrame (async) j @ scheduling.js:5 requestAnimationFrame (async) j @ scheduling.js:5 requestAnimationFrame (async) j @ scheduling.js:5 requestAnimationFrame (async) j @ scheduling.js:5 requestAnimationFrame (async) j @ scheduling.js:5 requestAnimationFrame (async) j @ scheduling.js:5 requestAnimationFrame (async) j @ scheduling.js:5 requestAnimationFrame (async) j @ scheduling.js:5 requestAnimationFrame (async) j @ scheduling.js:5 requestAnimationFrame (async) j @ scheduling.js:5 requestAnimationFrame (async) j @ scheduling.js:5 requestAnimationFrame (async) j @ scheduling.js:5 requestAnimationFrame (async) j @ scheduling.js:5 requestAnimationFrame (async) j @ scheduling.js:5 requestAnimationFrame (async) j @ scheduling.js:5 requestAnimationFrame (async) j @ scheduling.js:5 requestAnimationFrame (async) j @ scheduling.js:5 requestAnimationFrame (async) j @ scheduling.js:5 requestAnimationFrame (async) j @ scheduling.js:5 requestAnimationFrame (async) j @ scheduling.js:5 requestAnimationFrame (async) j @ scheduling.js:5 requestAnimationFrame (async) j @ scheduling.js:5 requestAnimationFrame (async) j @ scheduling.js:5 requestAnimationFrame (async) j @ scheduling.js:5 requestAnimationFrame (async) j @ scheduling.js:5 requestAnimationFrame (async) j @ scheduling.js:5 requestAnimationFrame (async) j @ scheduling.js:5 requestAnimationFrame (async) j @ scheduling.js:5 requestAnimationFrame (async) j @ scheduling.js:5 14[.WebGL-0x12fa8f200]RENDER WARNING: there is no texture bound to the unit 5 14[.WebGL-0x12fa8f200]RENDER WARNING: there is no texture bound to the unit 6 14[.WebGL-0x12fa8f200]RENDER WARNING: there is no texture bound to the unit 7 14[.WebGL-0x12fa8f200]RENDER WARNING: there is no texture bound to the unit 8 14[.WebGL-0x12fa8f200]RENDER WARNING: there is no texture bound to the unit 9 14[.WebGL-0x12fa8f200]RENDER WARNING: there is no texture bound to the unit 10 14[.WebGL-0x12fa8f200]RENDER WARNING: there is no texture bound to the unit 11 14[.WebGL-0x12fa8f200]RENDER WARNING: there is no texture bound to the unit 12 14[.WebGL-0x12fa8f200]RENDER WARNING: there is no texture bound to the unit 13 14[.WebGL-0x12fa8f200]RENDER WARNING: there is no texture bound to the unit 14 14[.WebGL-0x12fa8f200]RENDER WARNING: there is no texture bound to the unit 15 Unfortunately, even after searching an answer in google for a few hours, I don't still understand what these errors indicate.. If somebody could give me any advise or insight, it would be highly appreciated. Thank you very much.
  24. I'm building a grid of 64x96 sprites, laying them out at x * 64, y * 96, such that they should theoretically be seamless. However, some artifacts are appearing in the seams between sprites (image attached). My best plan to resolve that at the moment is laying sprites out at x * (63), y * (95). Does anyone know if there's another, accepted approach to this problem? I'm sure I'm not the first person to run into it.
  25. so my gsap duration is longer than next requestAnimationFrame(), lets say 2secs my ques: will it destroy my program in long run? should i bother about it and optimize it? will it create multiple gsap threads? how to optimize/destroy old gsap in next requestAnimationFrame?
×
×
  • Create New...