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

  1. I have this line "window.addEventListener('click', overBack);" which works perfectly. When having "window.on('click', overBack)" window is undefined, so I left the first option. But the problem is that "window.addEventListener('tap', overBack);" doesn't do the job. I've tried to replace window with page and screen and it didn't work. So I thought you might help me. How do I refer to the window/screen? Thanks in advance
  2. I have a class that extends PIXI.Graphics and created grapics objects in the class. I give them zIndex-es seperately but they show up as if the last item created is the one that is visible. What can be a problem here?
  3. Hey guys I have this input fields (they're not finished yet, I use them just for example). When I enter text the cursor goes with it and when I click outside I want to remove the cursor and keep the text obviously. Only mousemove event does the job but that's not suitable in this case. I pass a function that removes the cursor. I tried almost all the events but I don't manage to remove the cursor when I click outside of the input field.
  4. Rayj

    PixiJS and WebRTC

    I am dabbling in WebRTC and creating a One To Many feature. Note that I am not a seasoned developer and basically learning as I go. I was wondering if, down the line, I can incorporate PixiJS into my WebRTC for things like lower 3rds graphics or other graphic related things? If so, any additional suggestions for using Pixi with WebRTC is certainly appreciated?
  5. this.cursor = new PIXI.Graphics(); /****some code ****/ this.addChild(this.cursor); setInterval(function () { this.cursor.alpha = 1; //alpha is undefined setTimeout(function () { this.cursor.alpha = 0; }, 500); }, 1000); /*************************************************************************************/ let a = this.cursor = new PIXI.Graphics(); /****some code ****/ this.addChild(this.cursor); setInterval(function () { a.alpha = 1; setTimeout(function () { a.alpha = 0; }, 500); }, 1000); Hey guys, could you please explain why I get ''alpha is undefined'' in the first case and it works alright in the second case? TBH I don't know if this question is pixi related or js related. Also this.realInput.setAttribute( `style`, `position: relative; opacity: 0`, `type`, `password`, ); this.realInput.setAttribute( `inputmode`, `${this.inputMode}` ) //////////////////////////////////////////////////////////////////////////////// this.realInput.setAttribute( `style`, `position: relative; opacity: 0`, `type`, `password`, `inputmode`, `${this.inputMode}` ); Why is the first case working and the second one doesn't, isn't that the same somehow?
  6. 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)
  7. 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
  8. 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.
  9. 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?
  10. 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?
  11. 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!
  12. 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
  13. 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.
  14. 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
  15. 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.
  16. 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); }; ...
  17. 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!
  18. 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
  19. 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 };
  20. 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;
  21. 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
  22. 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?
  23. 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?
  24. 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.
  25. 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.