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 Standards
    • 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 463 results

  1. I'm researching about creating a visual " algebra geometry " desktop game-oriented app for students which the user can create 2D primitive shapes and parametric shape patterns with help of numeric-nodes. the similar application would be something like " grasshopper " plugin for " rhino 3d ". In parametric patterns user may create some thing around 1000 to 1500 user-defined shapes which each shape: - has its own animation for vertices, position, rotation - may response to mouse interactions - has its own color or texture and stroke - will be generated dynamically in runtime base on user input also I have to code a mini node base editor . I've seen and study web-techs and precious libs and frameworks like Pixi and searched alot about best practices. I have some questions and I'll be grateful if you help me to find the answers: - is web-techs suitable for the application? - according to what I absorbed from API docs, PIXI.Graphics is designed for none-continues changing shapes so should I instead extend PIXI.Mesh or the Graphics does the job? what is the best way of creating such a shape? - should the custom-shape class be my biggest concern or there are other performance related things I need to take care of? - any further suggestion ? thanks 🙂
  2. I want to render 50k circles of varying radius and colors. The radius can vary from 1 to 1000. I want to show it in a scatterplot chart where there are circles of different sizes and colors. I have made this codepen sample where I am drawing 10k circles and changing the radius and color of circles by clearing the graphics and rerendering it. The frame rate drops to 4fps. https://codepen.io/ranajitbanerjee/full/abNRRXN How can I make it faster?
  3. Minus the choice. and adventure. Day Job is a delve into the mundane. Play the role of a generic office worker. What do you do? Work, slack, or consume. Once you finish your day at work a narrative will occur to your character. This is based on your character's personality. Whoa, that's right. Getting psychological up in here. We actually follow The Big Five Personality Traits and narratives and items both affect these traits. Some narratives require a certain range of trait values. The game itself is made using angular2pixi (found here) which we created to integrate Pixi into Angular2+. The code itself should be obfuscated, so no peeking BUT we are more than happy to answer any questions about the development of the game. Overall, making Day Job was a grandly satisfying endeavor and we hope to grow it into something great. The narratives in the game right now are placeholder while we work on the real story. We hope to cleverly explore the human condition and poke fun at capitalism, consumerism, and modern day wage slavery. If you'd like to follow our fledgling game studio or stay up to date on Day Job development make sure to subscribe to us on social media: https://medium.com/@rhgames https://twitter.com/RbtHGames Enjoy! Browser: http://day-job.io Android: https://play.google.com/store/apps/details?id=com.rabbitholegames.dayjob&hl=en
  4. Hi, I am trying to take a snapshot of the main container ( stage) of my application ,which I render on every frame ( customRenderer.render(stage)), and paste that snapshot on the topmost child container of the stage. The code looks like, const snapshot = this._customRenderer.generateTexture(this._stage) const sprite = new Sprite(snapshot ) this._stage.getChildByName("snapshotHolder").addChild(sprite) It takes snapshot alright, but if the stage is scaled down , the sprite even though of actual size of the stage ( lets say 1000x1000), the area covered of it by the snapshot is much less, rest of the area of the sprite is transparent. Not able to understand the logic behind this. I want to take the snapshot of the stage as it is visible (scaled or otherwise). Thanks for your help. -Arin
  5. Hey guys, I'm brand new to PixiJS and have an issue that i can't seem to figure out. I'm working on a real time multiplayer game where there is a larger map ~3200 x 3200 and players are free to roam. However I want each players "camera" to only show a certain number of pixels so that someone with a large screen wont have an advantage over someone with a small screen. All the game simulation is handled on the server side. I know how to setup an on resize handler I'm just struggling with which values to update. I was able to fudge this with plain javascript like so: (I only every want to show 640x 360 pixels) const setCanvasSize = () => { console.log('Resizing canvas'); CANVAS_WIDTH = window.innerWidth; CANVAS_HEIGHT = window.innerHeight; const ratio = 16 / 9; if (CANVAS_HEIGHT < CANVAS_WIDTH / ratio) { CANVAS_WIDTH = CANVAS_HEIGHT * ratio; } else { CANVAS_HEIGHT = CANVAS_WIDTH / ratio; } canvas.width = 640; canvas.height = 360; canvas.style.width = `${CANVAS_WIDTH}px`; canvas.style.height = `${CANVAS_HEIGHT}px`; }; And now I need to replicate a similar behavior but am having some trouble. Desired effect is like so: this is a screen from my hacky version..
  6. Squid Books is looking to augment its team to build physics based games in PixiJS and MatterJS. Squid Books is an educational platform aimed at making Science accessible. At the core, there is a flexible reader whose learnings are strengthened by surrounding quizzes, videos, and word games. The next initiative is to build games demonstrating NGSS’s Earth and Space Science concepts. We are looking for part-time to full-time contractors/consultants which can lead to salaried employment. ~Additional Information~: - Website: https://squidbooks.com/ - SAAS Vendors: Google Cloud Platform, CircleCI, Sentry, Atlassian - Frameworks: React, Express, Cypress, Storybook, PixiJS, MatterJS Please email DM or email us at dev@squidbooks.com.
  7. Hello, I need help in drawing text vertically using using pixi. Ex: have to print text "NAME" in container as below; N A M E Ex 2: Text=" NAME PIXI" N P A I M X E I
  8. 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
  9. 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
  10. 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?
  11. 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.
  12. 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?
  13. 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?
  14. 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)
  15. 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
  16. 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.
  17. 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?
  18. 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?
  19. 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!
  20. 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
  21. 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.
  22. 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
  23. 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.
  24. 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); }; ...
  25. 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!