Search the Community

Showing results for tags 'pixi' or 'pixi-spine'.



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

  1. I'm trying to make an input module and I need to show the mobile keyboard so that I can go further. I'd appreciate any help)
  2. There's a TileSprite implementation in my project that seems to offset and distort on live production kiosks. this.tileTexture = PIXI.Texture.from(ConveyorAsset.RED); this.tile = new PIXI.TilingSprite(this.tileTexture, 491, 50); animate: function() { this.tile.tilePosition.x -= 0.51; if (this.enabled === true) { this.frameId = requestAnimationFrame(this.animate.bind(this)); } } I've let this animation run for 12-hours at a time on my development computer, and never seen an issue. However, at production facilities on kiosks running 24-hours a day, eventually there's some offset to the tile data that corrupts the animation. Any insight as to what might cause this, or how to debug it? Kiosks are Intel i5-7300, onboard Intel HD Graphics 620 Conveyor.mp4
  3. Dina

    Update text in PIXI

    When updating PIXI.Text do I have to remove it and create again. I've read the docs but couldn't find another way. Am I missing sth? Like we can just use clear() for updating a rectangle.
  4. I import pixi.js like this: import * as PIXI from 'pixi.js-legacy' But somehow when I visit the web-app using a browser having webGl disabled I get an error which tells me to use "pixi.js-legacy". How so? My package.json still contains the normal pixi.js and hence it's still installed, but not imported - could this cause the problem, i don't think right?
  5. Hello PIXI community! let image = PIXI.Sprite.from("imagePath"); I don't use loader for creating images and I pass this to a module where I need to get the real width of the image, but I get the width equal to 1 as I don't use loader (Hope I get this part right). So I used loader to get the real width but I got problems with passing the image to module as the image is used in setup function that is passed to loader. English is not my native language. Hope this makes sense)) So how do I create an image outside of the module and pass it to use it's width?
  6. Hi there folks! It's been a while since I posted something in here, glad to be back! I have a fair amount of experience in game development using JS Canvas, but recently I decided I had move on - so I went with Pixi. I figured out the basics of how to add sprites, do filters and such, but I just can't seem to figure out how to do simple lines and then manipulate them afterwards. What I mean is something like this: https://jsfiddle.net/gustavgb/anxcjfof/5/ I noticed that PIXI.Graphics has an object attached to it called "graphicsData" in which I can find the points that make up the line - great - but when changing the value of these variables, nothing happens to the appearance of my line. I'd appreciate any help, as I'm quite new to Pixi Thank you!
  7. dabontv

    Royalz.io

    Would like to showcase our new game Royalz.io. Royalz was made with pixi.js, node.js and socket.io. Try to be the sole survival in this action packed 2d battle royale game. Collect armor, food and ammo as you try to take down the other players. Play here: https://lagged.com/io/royalz
  8. 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.
  9. I try to make my pixi.js scene to adjust its size to the window on resize. To do so I use the following: window.addEventListener("resize", () => { this.renderer.resize(window.innerWidth, window.innerHeight); }) It resizes the canvas, inspecting the element it shows the correct size, but somehow the scene is cut off. Both the text and image are pixi.js generated - all stored in several PIXI.Container()'s
  10. let bigRect = new PIXI.Graphics(); bigRect.beginFill('0x00FF00'); bigRect.drawRect(0, 0, 200, 150); bigRect.endFill(); let smallRect = new PIXI.Graphics(); smallRect.beginFill('0xFFFF00'); smallRect.drawRect(0, 0, 190, 140); smallRect.endFill(); let smallRect_x = bigRect.x + (bigRect.width - smallRect.width)/2; let smallRect_y = bigRect.y + (bigRect.height - smallRect.height)/2; smallRect.position.set(smallRect_x, smallRect_y); app.stage.addChild(bigRect); bigRect.addChild(smallRect); bigRect.position.set(100, 100); I want to center smallRect inside bigRect. Why is it working in the code above when positions are set to (0, 0) initially, but wouldn't work if I had any position other than (0, 0) for the bigRect. It's not a problem to set the initial positions to (0, 0) and than change them, I just want to understand how it's working underneath.
  11. I'm all new to WebGL and Pixi.js - I started digging into this, because of this exact effect I'm trying to achieve: Demo As of now I got a scroll with multiple text object created using PIXI.Text() - this works fine, it's scrollable etc. But unfortunately I'm stuck implementing that kind of old tube tv screen bend effect on the text - don't even know where to start. Can I achieve this using pixi.js? I'm thankful for every hint! Do I need a different approach? That's how I init each text of mine: constructor($el, stage) { this.stage = stage; this.title = $el; this.text = new PIXI.Text(this.title.innerHTML, { fontFamily: "Unno", fontSize: 120, fill: "transparent", stroke: "white", strokeThickness: 1 }); this.text.resolution = 2; this.getPosition(); this.stage.addChild(this.text); this.addListeners(); const font = new FontFaceObserver("Unno"); font.load().then(() => { this.text.updateText(); }) } getPosition = () => { const {width, height, top, left} = this.title.getBoundingClientRect(); this.text.position.set(left, top); }; ...
  12. 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!
  13. EDIT: I just realized, that importing the normal font as a .woff2, defining a `@font-face` within css and then use `fontFamily: fontName` kind of works as well. One more problem though, the font is not being used on initialization, but when I f.e. change its color on hover. How so? How can I make it use the font from the very beginning? OLD: I'm currently trying to load a custom font to use is in combination with `PIXI.text()`. I got everything set up, the text is being displayed etc. - the custom font is not working though. To use a font, I read online, that it's necessary to create an XML file. After converting my .ttf to XML .fnt using Littera I added it to my project and called the loader. I don't know why it's not working, but `console.log(resources.font)` returns, what looks to me, a font object. How is it still not working? constructor($el, app) { this.app = app; this.title = $el; const loader = new PIXI.Loader(); loader.add("font", "/assets/fonts/font.fnt").load((loader, resources) => { this.text = new PIXI.Text(this.title.innerHTML, { fontFamily: "font", fontSize: 120, fill: "transparent", stroke: "white", strokeThickness: 1 }); this.getPosition(); this.app.addChild(this.text); }); } Using `fontFamily: resources.font` instead returns the following error: FYI: I added the .fnt file to the appendix. font.fnt RL Unno.woff2
  14. import { UnderlineText } from './underlineText.js'; let Application = PIXI.Application, loader = PIXI.Loader.shared, resources = PIXI.loader.resources, Sprite = PIXI.Sprite, text = PIXI.Text; let app = new Application({ width: window.innerWidth, height: window.innerHeight, antialias: true, transparent: false, resolution: 1, autoDensity: true }); document.body.appendChild(app.view); let underLine = new UnderlineText(null, [100, 385], null, null); app.stage.addChild(underLine); //app.loader.onError.add((error) => console.error(error)); Above is my index.js file. I have the module called UnderLineText. It doesn't work properly as it shows underline but not the text itself. It does count the width of the text, thus displaying the line underneath but I don't know how to make the text visible. Any ideas what I did wrong? P.S. I'm using PIXI js and I'm a newbie. class UnderlineText extends PIXI.Graphics { constructor(text, points, textFontSize, textColor) { super(); let t = this.textFontSize = textFontSize || 12; let s = this.lineWidth = 1; let c = this.textColor = textColor || "0xFFFFFF"; let ut = this.text = text || "Ողջույն"; let textStyle = { fontFamily: 'Arian AMU', fill: c, fontSize: t } let newText = new PIXI.Text(ut, textStyle); this.points = points; points[0] = newText.position.x; points[1]= newText.position.y; this.lineStyle(s, c); this.moveTo(points[0], points[1] + 13); this.lineTo(points[0] + newText.width, points[1] + 13); } } export { UnderlineText };
  15. Hey guys, i tried to make a soft sprite animation with PIXI.js, i learn about the ticker and i tried to implement, but is a loop, and its no use because is a movimentation player. See the print Is a isometric map, and i need I need the player to walk the floors, i already do that, but not so that the animation is smooth, it goes from point a to b without any animation. I also tried to implement the smoothie library but it was not possible. i stay waiting for responses, sorry for my bad english;
  16. I'm new to pixi and pixi-spine,and my english not so well In normal pixi-spine examples,you just : loader.add('dragontest','assets2/dragon.json') it will auto load the json file,atlas file,and the related png files the thing is,my mission is to avoid http request in my html file like,all your resources need to be in your one html file i know how to deal with a noral sprite load,like using:loader.add('dragontest.png' , 'data:image/png;base64,blablabla....'),you can avoid load file thru http like this but what to do with pixi-spine's json,altas files really bugs me. please please please help me and thank you for your time
  17. 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?
  18. 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?
  19. 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 https://css-tricks.com/multi-line-padded-text/ 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.
  20. 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.
  21. 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, https://github.com/psychopy/psychojs 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, www.psychopy.org, 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. https://jobs.nottingham.ac.uk/Vacancy.aspx?id=29376&forced=2 kind regards, Jon
  22. 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: https://github.com/pixijs/pixi.js/issues/2163 I just found the following with a possible alternative using multiply blending: https://github.com/pixijs/pixi.js/issues/3735 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.
  23. 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.
  24. 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.
  25. 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?