Search the Community

import React from "react"; import { useSelector } from "react-redux"; import { imgUploadSelector } from "../redux/imageuploadSlice"; import { Stage, Sprite, withFilters, Container } from "@pixi/react"; import * as PIXI from "pixi.js"; const Pallet = () => { const { uploadedImage } = useSelector(imgUploadSelector); const Filters = withFilters(Container, { blur: PIXI.BlurFilter, matrix: PIXI.ColorMatrixFilter, }); return ( <div className="flex justify-center"> <Stage height={uploadedImage.height} width={uploadedImage.width}> <Filters blur={{ blur: 0 }} matrix={{ enabled: true }} apply={({ matrix }) => { matrix.contrast(2); matrix.brightness(2); }} > <Sprite image={uploadedImage.image} /> </Filters> </Stage> </div> ); }; export default Pallet; I want help why in this only last property brightness is only showing in my screen not contrast. I have tried using Adjustment filter but it has been deprecated. I tried to get answer in stack overflow but not got any answer. Any help in this topic or matter is appreciated. Please contact to me via mail [email protected]. Thankyou

Hello. I need some way to make common browser UI(scrollable lists, file picker,popups) with pixijs. My needs: 1. Will need to share data with pixijs( access read file content in Pixi, shared plain JS array objects that act as state for react UI elements and accessible in pixijs). 2. Don't really need further interaction between react and Pixi beyond sharing data. 3. Don't really care for (and would very much prefer not to) using Pixi like react's functional style. Is this possible? If not, can someone recommend a simple js UI library that does the above(file picker, popup, scrollable list). Again, they don't need to have a functional style like react. I'm using pixiv6 with pixi-viewport.

Hello everyone ! I'm learning babylonjs with reactjs and I stuck in some trouble. I want to texture not to repeat and just cover the cup. I see some people talk about the uv and I want to know more specific how to do that. The code import React, { useEffect, Suspense } from "react"; import * as BABYLON from "babylonjs"; import "babylonjs-loaders"; type SceneEventArgs = { engine: BABYLON.Engine; scene: BABYLON.Scene; canvas: HTMLCanvasElement; }; type SceneProps = { engineOptions?: BABYLON.EngineOptions; adaptToDeviceRatio?: boolean; onSceneMount?: (args: SceneEventArgs) => void; width?: number; height?: number; }; const Scene: React.FC<SceneProps & React.HTMLAttributes<HTMLCanvasElement>> = ( props ) => { var scene: BABYLON.Scene; var engine: BABYLON.Engine; var canvas: HTMLCanvasElement; const onResizeWindow = () => { if (engine) { engine.resize(); } }; useEffect(() => { engine = new BABYLON.Engine( canvas, true, props.engineOptions, props.adaptToDeviceRatio ); let sceneD = new BABYLON.Scene(engine); scene = sceneD; // scene.clearColor = new BABYLON.Color3.Black; BABYLON.SceneLoader.ImportMesh( "", "./", "chavena.glb", scene, function (meshes) { scene.createDefaultCameraOrLight(true, true, true); scene.createDefaultEnvironment(); const myTexture = new BABYLON.Texture( "./texture1.jpg", scene ); myTexture.uScale = -0.5; myTexture.vScale = 0.2; const materialForCup = new BABYLON.StandardMaterial("city", scene); materialForCup.diffuseTexture = myTexture; myTexture.wAng = -Math.PI / 6; meshes[1].material = materialForCup; } ); if (typeof props.onSceneMount === "function") { props.onSceneMount({ scene: sceneD, engine: engine, canvas: canvas, }); } else { console.error("onSceneMount function not available"); } // Resize the babylon engine when the window is resized window.addEventListener("resize", onResizeWindow); return () => { window.removeEventListener("resize", onResizeWindow); }; }, []); const onCanvasLoaded = (c: HTMLCanvasElement) => { if (c !== null) { canvas = c; } }; // 'rest' can contain additional properties that you can flow through to canvas: // (id, className, etc.) let { width, height, ...rest } = props; let opts: any = {}; if (width !== undefined && height !== undefined) { opts.width = width; opts.height = height; } return ( <canvas style={{ width: "100%", height: "100vh" }} {...opts} ref={onCanvasLoaded} /> ); }; export default Scene; That's my result now ! That's that I want to get Thanks in advance !

Hello! I am looking for a HTML5[React] Game Developer who can develop a multiplayer game using React[Frontend] & Firebase [Backend]. I basically want a game which can be hosted on my site and can be played by my site viewers. I should be able to host a game session and my site viewers can join the session and play the game together. I will share the game idea on DM. I also have the designs ready, you just need to make the game according to it. Let me know if you're interested in this project. Just send me a DM and we'll discuss further. Thanks!

Emoji War Inspired by the card game "Egyptian Ratscrew", we created "Emoji War". Emoji War is a browser game, where your only way to win is by screwing your friends. Different cards, abilities, and a lot of luck will help you to achieve that! Please note that this game is on open alpha state, so please be forgiving regarding small bugs. EmojiWar.net I would appreciate your reviews and thoughts. Thanks!

Hi all ! I'm currently working on a bomberman-like game, full of traps and special items and up to 10 players (objective: 100 players) The game is currently under development and we have a lot of plans to enhance it: new mods and modding engine new heroes, skins, biomes manage your account, friends, group host your local games and much more... (made with pixi.js, react & howler for the frontend) Play right now here: https://beta.starbomba.io/ Hope you'll enjoy and feel free to discuss

Hello everyone, my name is gedion101, I'm new in this forum and new using Phaser.js and quite a little long time in react-native framework, which is javascript framework for mobile development, you can see in this website (https://facebook.github.io/react-native/), or you can see the documentation if you curious (https://facebook.github.io/react-native/docs/getting-started.html). Back to the topic, I have a wonder how to integrate the phaser.js module, for a react-native environment. So basically using npm way, and using <script> tag in HTML5 document, if I'm development target to the web, but different in react-native and you can't use <script> tag, because of a different rule. I found the alternative module, that call react-native-game-engine, is good, with matter.js as physics system in that game, but I have a problem, the game so lag, and to much render, for each asset to display on the phone. And another one, which is an ion-phaser, but I tried it and have a problem with that module, and the other is expo-phaser, is good, but in my workspace advice to me, don't use expo, find another way. so I give up, maybe in this forum, it will help me, to figure out this problem or some advices, to give which framework or tools for using phaser for mobile game development. for the code : app.js // import react module import React from 'react'; // import component from react-native module import { View } from 'react-native'; // import phaser module import Phaser from 'phaser'; // import scene for game import Scene1 from './src/exampleScene1'; // eslint-disable-next-line react/prefer-stateless-function class App extends React.Component { state = { config: { type: Phaser.AUTO, width: 800, height: 600, physics: { default: 'arcade', arcade: { gravity: { y: 200 }, }, }, scene: [Scene1], }, } callTheGame = () => { const { config } = this.state; const game = new Phaser.Game(config); return game; } render() { return ( <View>{this.callTheGame()}</View> ); } } export default App; exampleScene1.js : // import phaser module import Phaser from 'phaser'; // import asset image import Gimo from './assets/gimo.png'; // create class for scene 1 class exampleScene1 extends Phaser.Scene { // build constructor constructor() { // create identifier for class scene super({ key: 'exampleScene1' }); } preload() { this.load.image('GimoAsset', Gimo); } create() { this.add.image(400, 300, 'GimoAsset'); } } export default exampleScene1;

FreeThrow.io is a new multiplayer game where you must try to out hoop your opponent in 60 seconds! Simply swipe to throw the ball into the air. Get 5 in a row to unlock the multiplier bonus. Game uses React.js on the client side and Node.js on the server side. Play for free: https://lagged.com/io/freethrow

I am trying to understand how I could use React for rendering all the UI elements and Phaser for rendering a game (using Canvas or WebGL) within the React application. One way would be to use React's componentDidMount, so after I have my HTML ready I can use a div id to render the Phaser content. But in this case React does the game rendering too. Is there any way to achieve the desired result?

Rack'Em is an online multiplayer 8 ball pool game created with React.js, Three.js and Node.js Sink all of your balls before your opponent to win the game. Play here: http://lagged.com/io/rackem

Hi everyone! Just wanted to share a small proof-of-concept game I've been working on for a while. It's called The monster's vault. The main goal is to find a way out of a dark creepy dungeon, pull a lever that opens the exit door, while not being caught by a wandering monster that dwells in the darkness, and bla-bla-bla... the whole point here is not about gameplay anyway. This game is inspired by Keith Clark's demo of an HL2 location made entirely by CSS 3d transforms. I tried to repeat his approach by making a browser 3d game with first-person view based on CSS transforms without any use of canvas graphics. My other goal was to try out a number of modern web technologies and APIs available in the browser, so here's what I came out with. ReactJS as a rendering framework and Redux as a game state manager. Kind of a questionable choice for a game, one may think, but hey, as I said, it's a proof-of-concept WIP demo pet home project =) Pointer lock events to control the cursor so that it cannot flow out of the screen. Gamepad api to support my Xbox One gamepad. I haven't been more happy when it actually worked (not sure about other controllers though). Web audio api to control the sounds and the music. It provides a way to place a sound in a 3d space and even make it spread in a certain direction, and that's really awesome. Using your headphones while playing is highly recommended. Service worker makes the game work offline as it caches all the resources after the first load. It can get annoying though, when you start facing the problems with invalidating the cache. I also tried out the svg lighting filters to simulate some shaders on the textures (set on highest graphics quality value in the Settings section). It looks neat but drops the fps dramatically. Some conclusions: declarative 3d graphics with CSS 3d transforms and animations are cool and relatively easy to use, but not performant enough (which is totally fine) modern browsers have some really great APIs helpful for creating various web games making horror games is a huge, huge fun PLEASE NOTE: The monster's vault is only a desktop game and is viewed best in latest Google Chrome. It is inconceivably untested and may not work as expected on most machines and browsers. Some of the technologies used here are still not standardized and may break in the future. Also, the code is not optimised in any way, it weights some MBs. The low rendering FPS is compensated by the high cooler's RPS =) Anyway, I warned you. The game's github repo with some gifs, controls and credits — https://github.com/alvov/the-monsters-vault-game. You can play the game here: https://alvov.github.io/the-monsters-vault-game. Thanks!

Ranger Steve is a web (phaser) based realtime 2d shooter that let's you have instant lan parties with your friends. Ranger Steve: Buffalo Invasion YouTube Teaser Trailer Fast paced, intense shooter, explosions This is a realtime, "shoot em up", explosive multiplayer game that makes playing with your friends as simple as sharing a link. Made with: Phaser.io, ReactJS, NodeJS, Socket.io, and Redux.