Search the Community

Hello! I'm fairly new to PixiJS and I've been trying to create a function for our game running in the browser. The main purpose of my function is to have a player(Which moves on an infinite map) move around with a dark "Binocular" area around it. I've succeeded in making this using css and javascript using radial gradients with mask composite exclude in css. Here I could make the radius of these radial gradients decrease(get smaller over time), so it has an effect of "light running out". In addition to this I also did so gradients could be added dynamically, which allowed the game to have multiple radial gradients which acted as "holes" in a dark overlay. Below is a few images to illustrate the intended function. Image 1 is meant to represent how the zone itself should look. The orange is the background, the black is the semitransparent overlay and the enemies should be visible under this overlay. The second image shows the function of two of these circles overlapping(This is how it currently works using css webkit mask and mask masking) My problem is that this function was very laggy in firefox and I've been attempting to rework the whole system in Pixi instead. I've attempted to use regular methods of masking Graphics, but the problem is I can't seem to get this hole effect to work. I've tried to replicate some of the examples, but they haven't worked either for me. This is the example I'm talking about: https://pixijs.com/8.x/examples/masks/filter The closest i got to a solution was using the cut() function as a overlay and then changing the sizes of the radius dynamically(Then I'd make a function that could add "n" circles to make the other zones) let frame = new Graphics() .rect(0, 0, 208, 208) .fill(0x666666, 0.1) .stroke({ color: 0xffffff, width: 4, alignment: 0 }) hudOverlay.addChild(frame); let mask = new Graphics() .rect(0, 0, 100, 100) .fill(0x00FF00) .circle(50, 50, 50) .cut(); let maskContainer = new Container(); maskContainer.mask = mask; maskContainer.addChild(mask); maskContainer.position.set(4,4); hudOverlay.addChild(maskContainer); let testRec = new Graphics().rect(0,0, 800, 800).fill("#49cc6c", 0.5); maskContainer.addChild(testRec); I then have a mask where i can just add a semi transparent rectangle (Right now it's green for testing) on top. The main problem with this is that this is not very performant code, because masks are costly. So I am lost on what to do, I've heard many speak of generateTexture and somehow using this for masking, but I do not know how to do this in pixi v8? My argument for finding a way to use less masks is found in the performance tips of pixi under "Masks": https://pixijs.com/8.x/guides/production/performance-tips

Ski slalom is a simple 8-bit fast-paced downhill slalom game. Go through gates and collect points, avoid trees and rocks. itch.io link: 8-bit Ski Slalom

When using Android 4 and the Chrome browser, the index.html page for the Phaser 2 examples will not scroll past the 2 section heading/title lines of text for the animation examples. The farthest I can view is the title lines 'Animation' and '15 examples'. On the device native browser I can scroll the full list of 436 examples but examples like 'Click on an Image' in the 'Basics' section require several browser refreshes/reloads before they will work. Chrome runs 'Click an Image' immediately with no browser refresh required but I can't scroll down to see more examples other than Basics and Games. What fixes or work arounds can I use to handle these two browser problems with Phaser 2 example code?

Hello guys, I found one of my old projects on the computer and decide to remake it and share it with you. It's a simple 2D game, made in HTML5. Enjoy it. http://covid19arena.com/

Hi all! Today I want to share with you, fellow developers, my new HTML5 game, Forest Night Flight. Link: http://www.fedeali.eu/public/webgames/ForestNightFlight/ This is the first HTML5 game I made after few years of “break”. I switched engine, from GameMaker to Construct 3, and I have to say it revealed a good choice for this project. Forest Night Flight is an endless arcade game optimized for mobile browsers, supporting both Landscape and Portrait orientations. As a clumsy witch, fly on your broom for as long as you can, watching out for obstacles in the forest! Hold your finger on screen (or hold pressed left mouse button) to rise, and leave the finger (or release left mouse button) to fall down with gravity. For this game I worked on design and (visual) programming, while my friend and colleague Carlos worked on graphics. Music and SFX have been purchased from third parties. We would like to try selling either exclusive or non-exclusive license(s). What do you think of our game? Feedbacks, either positive or negative, are all welcome. Thank you in advance for trying our game! Link: http://www.fedeali.eu/public/webgames/ForestNightFlight/

Hey everyone, this will be a bit weird. So I am more of a creative director more then anything and I wouldn't even call me that. The most I have made is a Kaizo hack for SMW. I have been trying to learn some basics with Lua, ruby and python for years now and understand the idea and the dictionary but have never grasp when and where to use them. So why am I here? Well I want to make something basic, to keep me distracted and pass the time. I am in my 20's and have been stuck in the Philippines for about a year now... things aren't looking good and I am in a waiting period hoping to get home. I wont get to into it but need a distraction. I don't want someone to code anything or work for this little project just help enough for me to get it done. On to the idea. There once was a game called Idle Quest I use to play back in 2006. The site that hosted is was shut down and the game went with it. It was a idle game, true idle. It consisted of a map made in ASCII style. Similar to classic rogues. You would click on areas of the map, each had information on hover like suggested level and possible random loot. You would click and idle. No sprites just a black box white text character sheet on the side and a log showing you random events, loot, battles etc. That's all. You go to sleep and your character either died or you leveled and got loot. Equipment was automatically changed out did not matter if it was worse or better, you found it and it equipped. it was up to you when you should leave and idle somewhere else. I want to recreate this but with my flare. When it comes to sprite design, world and story. I already did all that. Sprite work, ideas, level design, assets. That's my strong suit. It putting it together and making it work. I will be making this on wix. I have made game guides and website on their before. (I use it because I don't know HTML5) Just some basic tips or tutorials would help on the following and I will work on trying to actually make it. -Creating a list of text that will be randomly pulled per area. Like a list of random loot and enemies and events (just text) I assume this would also be if else style if enemy then this else keep pulling from list I would also assume this would have to be separated by each. Items would have to automatically replace equipped items every time events would have to have a separate table of random things. -Figuring out the math, ( I don't want to make it to complicated with multiple stats effecting speed and all that) I figured Level would be the only factor in victory or death. like a if else/ true false style. The more I write the more I think that this is much more complicated then I thought. I guess I will stop here and if you want to discuss it more or help me in anyway just reply and I can make a discord or something.

Hi I've created a Chrome extension which allows people on the same browser page to chat. After install, just reopen the Chrome and press the "GG" button on the toolbar to enter the chat room. https://chrome.google.com/webstore/detail/nagging/neipknhfbgajiaiiollhocjpcdjfjaom

Hello, Please can someone tell me whether Phaser games will work well in IE9? As phaser uses webGL, I assumed it won't work in IE9 as webGL is not supported by IE9. But still I was able to open a few of the phaser games in IE9. I just want to get an overall analysis of browsers supporting phaser games.

Hello, i'm a JS developper in freelance and currently working on a personal project i'm making a game having the same gameplay as Diablo 2. I liked this game so much that i've decided to make a game with the same apporch (3D pre render, mouse based move...) for those who don't know d2 check this link => https://www.youtube.com/watch?v=S7TADQxS6mk the game is a PVP Melee (w/ team or alone), the goal is to defeat others players using teamwork and character' skill. Small map will force players to keep moving while trying to put enemies in trouble. Round ends when all enemies are defeated. Game ends when a team/player have reached 3 wins. A lot of works is already done : - spell/player collision - gameplay - in game interface (life/allies/map/score etc...) - out game interface (main room/lobby/matchmaking) - server side check (prevent cheating) - sound system - game state detection - pvp mode (1v1, 3v3 or even 2v2v2 or 1v1v1v1) this is developped using : Phaser, React for outgame itf, jQuery for ingame itf, SocketIO and express I want to involve a 3D graphist on the project. He has to use Blender to model and animate characters. I need it to be done with blender because this is the lone tool i use to render the animations on spritesheet. Characters will have a least 5 animations : running / iddle / taking hit / dying / casting spell. Other may be added in the future for "special spells" I can't upload a demo because of size restriction here but if youre interested feel free to contact me Thanks ;-)

Hi guys, I'm new to this and I have an issue in my current working project(it's first in phaser). I want to know how can I zoom in the game when it's opened in a mobile browser? The game is too small and I want to zoom and slide the whole canvas in the browser window. I can do this from outside the canvas but I cannot drag then from the canvas itself. Please help! Thank you.

Hello, developers! I am wondering about PIXI v.3 or v.4, how much they can live and work on the internet. Imagine now I start big project on v.3 or v.4. This project should be licensed with little exceptions. Should I extract the whole code related to PIXI(my view) to be specially maintained over the time? What is the experience on similar cases? What is the risk?

Company of Merchant Adventurers is a trading game based on the C64 game Hanse from the 80ies. It's a browser game completely in HTML5/JS and using Phaser for some game elements like the Map or the mini-games. It's got a bit of multiplayer as you can see other merchants in towns and buy shares or attack their ships and harbours. The goal of the game is to claim the title of Mayor in London. This can only be done by wisely trading the goods returned by your merchant fleet. The game is not commercial and I've developed it as a hobby game programmer. It's in english and german language (settings at the top). If you like trading games - turn based trading strategy, and maybe enjoyed the game Hanse - you will enjoy a quick round of my Merchant Adventurers - give it a go and let me know what you think - trade's up! Login and register free at: http://trader.thomashopes.de/indexgame.php More details and blog: http://trader.thomashopes.de

Hi, I just updated an old version of pixi.js we had been using. The cursor used to change to "pointer" when hovering over a DisplayObject in our embedded chromium browser (CEF). After v4.4.0 the cursor does not change on hover. I pinpointed that the last version it was working with our embedded browser was v4.3.5. Does anyone know why this might be and what I can do to fix it? Thank you

I am looking for someone that can build / brand an HTML 5 game that can be used on our website during Christmas. We may build several games.

Hey guys, today we finally launched our game Morterra! Morterra is an online survival game set at the dawn of man. You awake with absolutely nothing and must find food, water, and protection from others. You will need tools to build a base to protect yourself, armors to defend against attacks, and weapons to fight back. You will eventually grow tired and need to sleep. However, while you sleep you are still vulnerable to attacks, so you must build adequate protection for yourself to survive the night. The world contains no edges, no "safe-zones" (other than bases you build for yourself), and players can construct/destruct at their own will, but be conscious of whose stuff you destroy! Morterra was originally written in Java from around 2013-2015, with the intention of being a browser-based game. Once Chrome and other popular browsers disabled Java Applet embedding, it became apparent that Javascript would be the only option moving forward. We started re-writing the entire project in Javascript back in May. 6 months later, and we finally have something hosted and ready to be played! Check out some pictures of our new and improved game! This is our newly renovated login screen/front page to our website. This is a picture of our renovated UI. Still a work in progress, but it's an improvement! If you're still reading, check out the game! It's great to see new faces, even if you're just going to try and kill everyone! If you're interested in staying up to date, we also recently created some social media accounts to stay connected with our fan base! Follow Us: Instagram: @Morterra Twitter: @MorterraMMORPG Facebook: Morterra With converting to browse, we also managed to gain a bunch of new features! I will list some of the most notable ones, and let you find the rest for yourself! New Features: - High scores page (Try it: Morterra high scores) - Mini map - Music (Credits: About Morterra) Plans for the future: - Convert to 3D - Add SoundFX - Become the best new browser game of 2018 Thank you for reading! Be sure to check us out, and let me know what you think! Play now: Morterra - Online Browser Survival Game

So I am new to use Phaser to develop for mobile browser game. I have created the game in a workable state on PC and it does everything I want. It is basically a match3 game where everytime you tap/click on something you interact with the item. But for some reason I can't get any input to work on mobile. I have an iPhone6 and use safari, I have setup Firebug so that I can see the logs, but even if I add a simple "game.input.onDown.add(test, this); with a simple function to display a console message. It never gets fired in the mobile browser. How would I go about making this work? (It does however work on Android, tested it on Chrome, so that puzzles me even more). For each item that is clickable I have: function Gem(x, y, gemType){ this.gemType = gemType; this.spriteName = gemType.spritename; this.x = x; this.y = y; this.gemPhysics = GameManager.getGrid().addToGrid(this); this.gemPhysics.inputEnabled = true; this.gemPhysics.input.enabled = true; this.gemPhysics.events.onInputDown.add(listener, this); } function listener(){ console.log("Touch!!"); if(GameManager.canInteract()){ GameManager.getGrid().canRemoveSameColour(this); } } And the game setup looks as follows: var gameWidth = 800; var gameHeight = 480; var game = new Phaser.Game(gameWidth, gameHeight, Phaser.CANVAS, '', { preload: preload, create: create, update: update }); //var gems; function preload() { game.load.image('sky', 'assets/sky.png'); game.load.image('star', 'assets/star.png'); game.load.image('star_blue', 'assets/star_blue.png'); game.load.image('star_green', 'assets/star_green.png'); game.load.image('star_red', 'assets/star_red.png'); game.load.image('star_purple', 'assets/star_purple.png'); game.load.image('star_lightblue', 'assets/star_lightblue.png'); game.load.image('star_black', 'assets/star_black.png'); game.load.image('star_boost', 'assets/star_boost.png'); game.load.image('reset_button', 'assets/resetbutton.png'); game.load.image('tile', 'assets/gridtile.png'); game.load.spritesheet('explosion', 'assets/explosion.png', 118.2, 118); game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; game.scale.fullScreenScaleMode = Phaser.ScaleManager.EXACT_FIT; } var gameMngr; var scoreText; var isFullScreen = false; function create() { game.input.enabled = true; game.inputEnabled = true; if (!game.device.desktop){ game.input.onDown.add(gofull, this); } this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; this.scale.minWidth = gameWidth/2; this.scale.minHeight = gameHeight/2; this.scale.maxWidth = gameWidth; this.scale.maxHeight = gameHeight; this.scale.pageAlignHorizontally = true; this.scale.pageAlignVertically = true; this.scale.setScreenSize(true); // A simple background for our game game.add.sprite(0, 0, 'sky'); game.physics.startSystem(Phaser.Physics.ARCADE); // Grid var grid = new Grid(14, 10, 175, 100, 30, 'tile'); this.gameMngr = new GameManager(); GameManager.setGrid(grid); GameManager.resetScore(); // Start Game GameManager.startGame(); scoreText = game.add.text(300, 0, "Score", { font: "40px Ariel", fill: "#ffffff", align: "center" }); } function update() { //console.log(game.device.desktop + ", " + game.device.iPhone); scoreText.setText("Score : " + GameManager.getScore()); if (!game.device.desktop && !isFullScreen){ gofull(); } } function gofull() { console.log("Go Full!!"); game.scale.startFullScreen(false); isFullScreen = true; } In there I also attempted to try and force the mobile version to go full screen, but for some reason that also doesn't seem to work properly. All in all, I can't seem to trigger any touch/input events in a mobile browser.

I created a quickstart application that I hope would be useful to some of you. It is a Phaser 2.8.8 quick start application that incorporates Webpack (ES6), and Cordova. It supports iOS and Android out of the box, along with all default Phaser supported web browsers. https://github.com/udia-software/phaser-cordova-es6 The code is on Github and is licensed under Apache V2. Enjoy!

Can anybody explain me why pointer event (mouse and touch events) does not work in Edge browser ? It Works well with Chrome FireFox Opera! What is difference? Is there any better way to handle (mouse and touch events) in all browser same? You can try and see difference between Edge and Chrome/Fierefox/Opera in this example/game. (here I use hand.min.js) Is there any better alternative of hand.min.js ??? Is there any bug in Edge browser or BabylonJS's hand.js? https://ajna4taiga.tk/PerplexusShadowOpen/PerplexusProd.html Edge problem: When I release any of WSAD key it has longer delay only in Edge (Windows) Browser. Is there any batter way to handle (mouse/touch evnets) with javascript? greetings Ian

My first game using phaser framework, presented it as my final year project, very humble and easy not much going on, just a simple platformer that's supposed to take away the fear of programming. Although i would suggest some ear muffs cuz the music can get pretty annoying

It's been a long time since I was able to finish a project of my own, but here it finally is: Tap Racer! Tap Racer is a mobile optimized game that combines rogue-lite elements with a racing game. While your car drives automatically you need to tap the arrow-buttons to switch lanes and find the fastest route as well as avoid obstacles. There are 10 race tracks from around the world and while they all have a unique layout they also have a different surface composition of: asphalt, sand, and dirt. You can preview each track, tune your car in the garage and then give it your best shot! Tuning your car correctly is crucial so you have the right suspension, wheels and body that give you the most advantage in the upcoming track's surface composition. Win 10 races in a row and you win the game on your chosen difficulty. But don't worry if you lose: you get to keep everything that you have unlocked to get an advantage on your next try! This is where the rogue-lite characteristic of the game comes into place. Controls: – Tap arrow buttons to switch lanes (if on a computer, you can use your keyboard's arrow keys) – Car drives automatically Features: – Rogue-Lite elements – Tune your car in the garage – Unlock new cars and hard difficulty Game Link: Play Tap Racer

Hi everyone, I'm looking for feedback on my first game, Beehive Blitz (http://www.fizzycool.com). It's a speed variation on the Beehive Solitaire card game. The goal is to remove all of the cards from play and beat your previous time. Or for people that don't like speed games, you can ignore that and play at your leisure. I think overall the game plays well. I've tested it in Chrome, Firefox, iPhone6 Safari, iPhone4 Safari, so feedback and bug reports on other devices would be great. It's responsive so it should look good in either orientation. This was built in Phaser. A mobile version of the game won second prize and will be featured in The Blur App this coming June (http://theblurapp.com/). Thanks, Mr. Fizzy Cool

? Unique and smart animal puzzle, not just a regular sliding or jigsaw game. Nice collection of different wild animals with easy one finger control and beautiful vivid graphics ? Hi guys, there is my new puzzle game. As usual made by Construct 2 , GUI and great animals collection from graphicriver, music from audiojungle, and little bit graphics by me by Inkscape Play in Browser (The WEB version a bit shorter than android and it's take some time for images to upload But in an android version the game starts pretty fast) : http://animal-puzzle.bitballoon.com Google Play : https://play.google.com/store/apps/details?id=com.SeventhReactor.AnimalPuzzleLogic ? So I would like to hear your feedback and If you like it ❤ please rate ===================================================================

Hi, I was wondering if someone had experienced slight differences in "offsets" using sprite2D texture and wether it might be related to caching. As an example I have a fairly small texture of 16*16 here in svg, but i tried also using png, same problem. That's the begining of the sprite texture zoomed in 4800% When using it in chrome with a code like this: const crossSheet = taskObject.cloneAssetIntoScene(R.get.crossSheet, scene) crossSheet.hasAlpha = false const cross = new BABYLON.Sprite2D(crossSheet, { parent: canvas, id: 'cross', marginAlignment: 'v: center, h: center', spriteSize: new BABYLON.Size(16, 16), spriteLocation: new BABYLON.Vector2(0, 0), }) cross.spriteFrame = R.get.cross_predict The texture is at the center of the screen here, in chrome the top misses 0.5px In Safari there is a difference in colors and width of strokes: If now I am using a 16,17 sprite size i get a correct sprite in chrome: But somehow it is seems worst in safari: Any clue ? Do you think it is related to the caching strategy ? @Nockawa Here is the link to the texture: https://drive.google.com/open?id=0BxggOFF8_iXkb3JRRjg0YkJtRzQ Here is a playground, on the playground it is the BOTTOM 0.5px that get cutoff.. http://babylonjs-playground.com/#20MSFF#64

Just a quick and small project, hopefully enjoyable. MTS Dunker - Take the Basketballs and slam them into the net. Click or tap on the ball, and drag it into the net. Simple as that. Had some feedback for the tutorial to show it in full, rather than use the arrow, so will eventually put that in. And to add some special dunking patterns etc. Didn't plan to give it an update but will do if it's loved enough just like every other project... Play it here (Mobile Friendly) - Umz Games Play it here (Mouse Only) - Kongregate All feedback is appreciated, and suggestions are usually written down and filed so when an update does eventually happen, your suggestion is put to use. Thank You. If you don't have time, or can't be bothered to leave a comment, hit the like button (if you like it), Thanks!

Loon Ride, the epic loon game, has received major updates on all platforms! Collect loons, shoot cacti, and soar through endless mode. This game was made using Phaser. Read more about the game here: https://loonride.com/about/loonride Play the game in your browser here: https://loonride.com/games/loonride Get the game on Google Play here: https://play.google.com/store/apps/details?id=com.loonride Promo video: