Search the Community

hello, can somebody help please? Situation: i have a button and i have a sprite. By clicking on button i want to change tint of sprite (i dont want to click on sprite, just button). How can i do it? The problem here is: i understand that i can have some state in parent component that can push this state to sprite. but if i have really big amount of these sprites, i really need save all tint properties for any of them? or there is more easy way?

Hi, i'm absolutely new in react-pixi, spent like few days but nothing works. Can somwbody answer, why this example doesnt work? Neither of these mouse events dont work on sprite, but in examples which i saw they work. React-pixi v7 import React from "react" import '../styles/styles.css' import { Stage, Sprite } from '@pixi/react'; import img_obstacle from './game resources/img/basic/obstacle.png'; export default function Component(props) { return( <Stage width={750} height={550}> <Sprite image={img_obstacle} x={300} y={300} interactive={true} pointerdown={() => {console.log("HI")}} pointermove={() => {console.log("HI")}} mousedown={() => {console.log("HI")}} mousemove={() => {console.log("HI")}} mouseover={() => {console.log("HI")}} mouseout={() => {console.log("HI")}} onMouseOver={() => {console.log("HI")}} onClick={() => {console.log("HI")}} /> </Stage> ) }

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!

Hello community! Unfortunately I have a game-breaking issue that troubles me a lot recently and I'm running out of ideas. In my game I have built a frontend using React and embedded a Pixijs canvas on one page. While the game is running and the game loop (requestAnimationFrame() with a modest 50 ticks per second, additionally some "interpolation" code that renders interpolated position updates between the ticks to make the game look very smooth) updates the scene, React handles a scoreboard and a chat right next to it. Now for example, whenever someone writes a new chat message, the virtual DOM is getting updated to push a new <div> on the page, which is displayed right next to the Pixijs game. The game itself is extremely smooth and runs perfectly. But when the elements of the page change (new chat message, new scoreboard results) it causes a small visual freeze in my Pixijs game. The loop still updates everything correctly as there is no desync between the server-side state of the game and the client-side state of the game, but visually there is a small freeze. I believe that my Pixijs code is pretty optimized and I tried everything on the React side of things aswell. I managed already that React does not re-render the whole page but only the parts that actually update (the chat, the scoreboard). But it did not solve the issue. The weird thing is this: I tried a little experiment where I "spammed" many automatic updates (multiple every second) to the player scoreboard and chat using server messages that emulates the same behavior as when players manually type messages. And the game did not freeze much. But whenever I play the game with a couple of players and players write in the chat or automatic chat messages appear (e.g. informing everyone that a player left the game) or the scoreboard updates, there will be a small freeze frequently. Does anybody have experience with a similar issue and could be of assistance? I'm willing to let you look into my codebase and you can also try out the game if you are interested to experience this issue urself. I would be very glad if someone could help me as this problem seems to make all my efforts in developing this game go to ruin sadly.

I'm working on a large solo game project where I am attempting to use a combination of traditional DOM elements (React) and canvas elements (PixiJS and react-pixi-fiber) in the project. I wanted to gain visibility into the canvas element in a functional test, and didn't immediately see any libraries or posts explaining how this could be done. I've come up with a process that works for me, using Cypress, and wrote about it. Perhaps someone gets some value from this, and I'm happy to discuss testing and PixiJS! Thanks! https://medium.com/@zenblender/functional-testing-of-a-hybrid-pixijs-react-app-281ed5ea04b3

I made a game in a week for a game jam with Phaser 3 and React: itch.io's page: https://ldd.itch.io/re-wand Youtube let's play (not by me):

Good evening world I'm new to posting anything like this online so bare with me if I meander a bit I'd like to present little something I've been working on for the last 5 weeks. In short, It's a work in progress incremental game about exploring space called Top Fuel Spacer. In long, It's an incremental game with a vast scope. The end game vision, is to have an incremental game with a tone of content. Tasks (i.e. Quests), collectibles, achievements, characters, customization, random generation, ui themes, prestige, conversation trees, research, engineering, building, hacking, mining, attacking, defending and chatting - single player and multiplayer. The laundry list of tasks can be found on this Trello board https://trello.com/b/lEMbH9W8/top-fuel-spacer My goal is to build a community driven game. Developed in tandem with feedback from players. The current build of the game can be found and experienced here https://top-fuel-spacer.herokuapp.com/ It's mostly a mere proof of concept skeleton, conceptually representing some of the systems, just 10% of the game if I'm being generous in estimation. Not much in terms of actual gameplay yet. What I'm looking for from you kind strangers of the internet, is some form of validation for this game. Your opinions. Your questions. Do you like it? Should I continue with it? Looking forward to your feedback. Have a good night PS: I've made a Discord thingy for the game https://discord.gg/ak3WBJ8

Check here ! Well, not actually the first game, but first which I’m finally done and self-publish. The game is pretty simple: just repeat numeric sequence. That easy! Nothing should be difficult ))) It works on top of HTML5 technologies. Powered by preact and by pure css effects. The intend was to learn react hooks and dive deeply into css. After a while react was replaced by more lighter and faster - preact. As you can see, those are not quite usually used for game dev., but I was motivated So, please, give me your thoughts about this one. Check here !

It would be a good idea to use the vitualDOM the React with the Phaser? It would not improve the perfomace the game? Anyone tried it? Sorry for my English...

Hello guys, I lost my other html5gamedevs account @Nicholls but I want to share with you guys my new contribution to Phaser 3, a web component to integrate Phaser with any other Framework (Angular, React, Vue.js, etc): https://github.com/proyecto26/ion-phaser This is very useful because you don't need to manipulate the DOM directly using ids and you can use Phaser like any other component. From the GitHub repo you can find some examples, also check from Codepen too: https://codepen.io/jdnichollsc/full/oRrwKM Regards, Nicholls

i am trying to figure out why assets sometimes “double” when character moves quickly. i think it’s probably a problem in gameLoop() or draw() but i can’t figure out where. i want the player to move whenever the user presses a key, but the monster movement is on a timer (1x per second, or less depending on difficulty level). the requestAnimationFrame(renderViewport) call is inside draw(). draw() is called whenever character moves, but gameloop() only runs 1x/second (or per .5 second, etc) for monster movement, and there is a draw() call in there too. is there a better way to do this? front end: anti-fascist-heroine-addiction.surge.sh code: https://github.com/rifkegribenes/anti-fascist-heroine-addiction

Hello guys, I just completed a little demo: a very small VR scene editor. I'll be very happy if you wanna try and give me back some feedback. Don't forget also to get a look into the code https://github.com/kenta88/react-imago3d Thanks

Hi. We're working on a few HTML5 games. Maze Runners is absolutely a work in progress but I'm hoping to quickly improve it and get it sort of to beta by Saturday. It requires at least two players to test. Instructions: (Desktop only) Clicking play will put you in the lobby and a game will start if there's another player. Clicking the blue box on the Maze Runners panel will bring up an invite url to link to someone you want to test with. Thoughts and comments welcome! BIT ARCADE PS: Pretty much nothing else on the site works yet (pool etc are mostly dead links)

Do you want to make good looking and well performing web games for a wide variety of devices? Do you want to help create real-time multiplayer games, played by millions? Hidden Monster Games is in search of a senior JavaScript developer that wants to join our studio to create accessible, competitive online multiplayer games. We want a programmer who will help us add a lot of juice, polish and fun to our games. Join our small team, where you can have a direct influence on almost every facet of our games and studio… and earn a good salary. Work at Hidden Monster Games Hidden Monster Games is working on expanding its very popular game ‘Curve Fever’. Curve Fever has millions of fans, but we want to re-envision the game in HTML5 for web and mobile, as well as creating other competitive, accessible multiplayer HTML5 games. Key aspects of your role will be to: - make games in Pixi.js and React - write clean code with the help of TypeScript - implement stunning graphics, effects and animations - optimize HTML5 games for a variety of devices Team We believe that great teams make great games. This means that we: - set clear goals - have the freedom to decide how the goals of the team are best served - share ideas inside and outside of the team, so we can continually improve ideas and process - practice respectful collaboration - always try to learn and improve ourselves We heavily value a team of professionals with a deep understanding of their specialization and understand what it takes to work together to make great games. Therefore, we put a lot of effort in clear communication and encourage team members to go to events, near and far. Once a year we all attend one major gaming conference. Last year we went to GDC. We provide the team with all the necessary tools, equipment and an awesome and inspiring environment. We frequently have lunch together and it is not unusual for us to grab a beer and play a game after work. Studio We are situated in the vibrant city-center of Amsterdam, right behind the Dam square. This allows for inspiring walks over the cobblestone streets, canals and through the picturesque scenery of the city. Our studio is on the top floor with a great view of the city-skyline from our large windows and balcony. The studio itself is spacious and inspiring, with some cool graphics on the walls. It is an open workspace, but we put a lot of effort to enable focused work. The studio is fully equipped for brainstorming and collaboration. Among our work spaces we have a lounge, meeting room, balcony and a quiet room. This enables our diverse team to work in different locations and get fresh perspectives to find solutions. Our development philosophy - Small agile team consisting of professionals - Scrum with biweekly sprints - Community focused design - Share our progress with the player community - Share our progress with the game development community Requirements - 3+ years professional experience in JavaScript - Good understanding of Pixi.js and React - Knowledge of pixi.js and React libraries and tools - At least a Bachelor degree - Willing to relocate, the job is onsite in Amsterdam - Willing to expand your knowledge - Experience working with scrum - Give constructive feedback on design, process and people - Receive constructive feedback on design, process and people - Wear multiple hats, and help out in other areas when necessary - The job is a full time job We offer - A small team (8 people) that is talented and ambitious - The possibility to shape a team and company - A professional team culture built on trust - Direct impact on the game and input on game design and art - An attractive office in the city center of Amsterdam - Help with relocation Salary Competitive salary, also compared to other sectors, depends on experience. Apply by sending a cover letter, CV and example source code to [email protected] .

Hi all, we are looking for a HTML5/React/Redux Developer to work with us at a Gaming company (Gambling) based in Surrey (UK). If you're interested in the position and would like to find out more info please message me with your details. Thanks! Onsite only and no agencies please.

I've been working on a BabylonJS game for fun and wanted to try out integrating with React and Redux for maintaining game state and showing a UI outside of the canvas. I took as a starting point the Quarto game from Temechon (with permission). I changed the game a bit mostly so that there was enough state from my Redux reducer to do the full UI in React, so remove all direct DOM manipulation and moved logic around for that (some using 'redux-saga'). There is an npm which contains the React <Scene .../> component and a redux middleware for intercepting actions. In the demo, you can see when you mouse off the canvas that the lighting is dimmed - this is not part of the component, but a prop called from the event added in Quarto. There is built-in support for showing the debug-layer via a React component <Button onClick={this.toggleDebug}>...</Button>. The full demo can be viewed here (click on Quarto link). Note that the game is loaded as a fractal and only downloaded when you click the link - good for Single Page Applications with multiple components. https://brianzinn.github.io/react-redux-babylonjs-starter-kit/ Original demo (includes a tutorial to explain the game): http://www.pixelcodr.com/games/quarto/index.html The source code for the NPM component is: https://www.npmjs.com/package/react-babylonjs https://github.com/brianzinn/react-babylonJS/ Full source-code of the demo is in a starter kit I created (forked from davezuko) that uses react-babylonjs with hot reloading and ES6 support (via babel) and to have your babylonJS project running without needing apache or IIS. So, this is a quick way to get started. There are issues for sure, but my workflow is going well and that is my main goal - speed of development. Make a change see it right away. https://github.com/brianzinn/react-redux-babylonjs-starter-kit Things I would like to add are support for more events, add tutorial in Quarto, figure out why multiple events fire sometimes, WebGL crash issues, etc - so not a v1 component, but worthwhile to share I think. If you are looking for deploying across mobile platforms then you may want to look at other GUI options, but especially for rapid prototyping or targeting desktop browsers this was really fast for me, especially with HMR.

I am writing games in Phaser using webpack for building deployment versions and running hot reload server for development and i am using karma for testing. I am new to most of those technologies so i am open to critique but if someone looks for starting point for connecting Phaser with those technologies i have made git repo that maybe is good starting point to start building your own projects: https://github.com/Xesenix/game-webpack-react-phaser-scaffold If you are more advanced at using such an environment for developing phaser games I would appreciate advices what i can fix with it

I am an experienced developer with 10 years of experience. Now I have to develop system based on graph theory and category theory, allowing use in any environment any application complex semantic/semantic legal interaction. With this system i can spread rights as properties on graph structures and to maintain the integrity of any changes. It has now reached the state when I want to use it somewhere. Now we are working on using the system for fast and dynamic management of crm/cms/lms systems. The work is free for me and my friends. Ultimately, we hope to launch many services, games and apps and provide more than half of the functionality in the OpenSource. I want to create a game which would qualify the statement: Strategic (civ, eu4...) Tactic (construction, mining, buttle, minecraft, heroes of the storm...) Open world Generated in real-time environment map and combinations of elements (aka technology) Cross-platform and cross-browser Online Embedded systems to organize tasks and communications, management of teams and hierarchies of subordinates. and more... I know a huge amount of development. I am looking for anyone who would be interested in. I'm looking for those who would like to make the perfect modern, minimalist, material design of map generation, units.. I'm looking for those who would like to develop ideas and to create the mechanics. We are looking for friends for this undertaking. It's free. However, the participation has to some bonuses. I am willing to share all the technology I possess. I am ready to teach if need be.

Hey guys, I'm Eric Muyser. I'm a web developer in Canada. I've built some apps, game engines, bots, emulators and such over the last 15 years. I've made attempts at making games before, and never finished, but I know where I went wrong. I now have values that guide me, both personally and professionally (many found in Think and Grow Rich). I'm now ready to make games for fun and for profit. FAQ #1: "I don't agree with all of this?" That's okay. I think that's why it's such a struggle to find a good match - we all have different opinions. If you don't agree with half of it, please disregard this post and keep on doing your own thing. If you align with most, but not all, let's chat anyway and feel each other out. FAQ #2: "Why a cofounder?" In my mind, the most effective mastermind is a partnership (combined ideas, experience, perspectives, connections). An employee will rarely fit that role, because it's unlikely they will be of similar mind or on the same vibe. A friend will not often share the same philosophy, and if they do, it's still a business venture and it's important we both know that and we're both invested. Friendship is ideal, and likely, but not mutually exclusive to be a cofounder. FAQ #3: "Why did I never finish a game?" Overly ambitious goals + competitiveness. Perfectionist, isolation to build the next best game engine and map editor, and life getting in the way. Standard stuff. I'm over that. I'm looking for another developer who shares similar values (I'm open minded, not everything has to be a match, let's talk) and has decent programming experience (preferably JavaScript, currently using Phaser + React Native). ☐Non-competitive, very faithful mindset. Build great games, don't worry about people stealing our ideas or games. ☐Agile mindset. Small diffs over big bangs. Get something done and working, then iterate on that. ☐Specific frameworks matter less than results and cross-platform distribution. ☐Build something that works, and find a graphic artist who takes an interest later. ☐Build native modules when necessary (C++) and consume them in scripting land (JS/LUA). ☐Impact mindset. Build for millions of happy players. ☐Seek feedback early and often. ☐Don't compromise core game mechanics for timelines, bottom lines, or any other lines. ☐Don't give paid players a competitive edge over non-paid players. ☐Enrich the lives of everyone involved. Give to people more use value, than cash value received. ☐Promote trade and random distribution. ☐Make experiences as unique as possible. ☐Levels should be beatable, and just difficult enough if the player makes a mistake, they blame themselves. ☐Experiences shouldn't feel -arbitrarily- random or have lots of boring buffer content. ☐Movement and controls are key, if these are missing, it doesn't matter if everything else is there. ☐Use randomization heavily in items, skills, and character builds. ☐Empower modding. Give users the ability to generate their own content, languages, and tutorials. ☐Community involvement should be open on day 1 of development. ☐Don't take all of this too seriously. Some games we look to for inspiration (in some areas, not all areas): morrowind, diablo 2, silver, pac-man 256, agar.io, realm of the mad king, zelda, golden sun, fire emblem, pokemon. Next steps: ☐Contact me. ☐Lets chat about our vision, goals, and see if there's alignment. ☐Help each other with a few simple games. ☐Build out a "game engine" (or rather, a library to re-use similar components). ☐Create some wicked and wickedly successful games. Please reach out if this interests you. Thanks for your time, Eric

Hi, I try to search everywhere and I only found one example which is in ReactPIXI. My question is how I can make React communicate/emit data to PixiJs ? For example, React emit data and it listened by Pixi. Is there any good example out there? Thank you.