Search the Community

Showing results for tags 'Javascript'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 Game Coding
    • News
    • Game Showcase
    • Coding and Game Design
  • Frameworks
    • Phaser
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Found 591 results

  1. Всем привет! Ищем PlayCanvas разработчика для работы над проектом: мини-игры в одном приложении на тему зимних видов спорта. Проект уже запущен, требуется лишь добавление контента в виде мини-игр, в рамках уже существующего фреймворка. От разработчика будет требоваться программирование игровой логики и участие в процессе создания игровых механик. Работа в паре с основным разработчиком, взаимодействие с художниками. Все покажем и расскажем! Работа удаленная, оплата почасовая. Сдача проекта - конец января. Ждем ссылок на ваши проекты с рассказом о себе на (telegram: @tv8eye)
  2. Gaming Innovation Group (GiG) is seeking JavaScript game developers for its brand new in-house HTML5 iGaming studio in the heart of Marbella on the Costa Del Sol. If you have experience with JS frameworks such as PIXI and and have an interest in online games, then GiG offers an exceptional career opportunity for you. Job description and application links here: Learn more about GiG here:
  3. is there a gradient tint in phaser?

    is there any way to do a gradient tint in sprites/images in phaser? i'm using canvas mode , not auto or webGL Thanks. Sorry, for bad english :|
  4. This is rodrigo Borgia. I am looking for a game developer that supports me on an idea. I have actually a platform used in the call center company to increase agent's productivity. In this platform, called Motivarnos ( ) , you get points when answering questions from work and when you accomplish a goal (like amount of sales). And with the points, you can redeem prizes (actually like perks, marketing prizes such as pens, balls, mugs, cups, etc.) i would like to get out of the physical prizes and use games add ons and power ups instead in example, having something like candy crush, and if you have collected enough points, you can buy an add on for that game. (The one inside our game, not the original one outside ). So, in that sense, im looking for a game developer to help me with the coding and art piece. Once done, my actual platform coder gets this coding to include in motivarnos. do you feel this is something you can help me with?
  5. Random Located Sprite Collision

    Hi everyone, I am trying to add collision to sprites that are randomly spawned in the map of the game. // New object of class Player the sprite name is 'ship' player = new Player("keyboardMouse",,, 200, 200, "12341", game.add.sprite(,, 'ship'), //Sprite handler object Weapons.sniperWeapon.weapon, // Weapon handler object ThrustEmitters.ourEmitter.emitter // Thrust emmiter handler object ); // loop to randomly place the sprites for (var i = 0; i < 200; i++){ var asteroid_brown = game.add.sprite(,, 'asteroid'); var rock = game.add.sprite(,, 'rock'); } In theory, I would want to make something like the resources in (trees, rocks, gold etc.) You should be able to add collision so that when the player cannot just travel through them and also when shot at you would get 1 of the specific resource. Also if this can be done in a better way, how would you do it? Thanks!
  6. Sprite collision

    I am currently making a game that you can check out at and I would like to add little asteroids in a fixed random location in which the player cannot go through. I have looked at the phaser examples as well as watched some videos, but I cannot get it working. What is the best way to go about this? I have linked my files so you can check them out. I would really appreciate any help. This is the code that I am using: (create.js) function create() { game.physics.startSystem(Phaser.Physics.ARCADE); game.renderer.clearBeforeRender = false; game.renderer.roundPixels = true; game.add.tileSprite(0, 0, 30000, 30000, 'space'); //game.add.tileSprite(0, 0, 1920, 1920, 'background');, 0, 30000, 30000); //Possible weapons Weapons = { sniperWeapon: new Weapon("Sniper weapon", 0, 1000, 0, null, null, false, 5000, 90, game.add.weapon(5, 'long-bullet')), uziWeapon: new Weapon("Uzi", 20, 50, 0, null, null, false, 1500, 90, game.add.weapon(500, 'bullet')), AK47LikeWeapon: new Weapon("AK47-like", 5, 100, 0, null, null, false, 1000, 90, game.add.weapon(100, 'round-bullet')), }; ThrustEmitters = { basicEmitter: new ThrustEmitter(game.add.emitter(,, 400), ['fire1', 'fire2', 'fire3'], 0.3), ourEmitter: new ThrustEmitter(game.add.emitter(,, 1000), ['fire01', 'fire02', 'fire03'], 0.5), }; // Creating a new object of class Player player = new Player("keyboardMouse",,, 200, 200, "12341", game.add.sprite(,, 'ship'), //Sprite handler object Weapons.sniperWeapon.weapon, // Weapon handler object ThrustEmitters.ourEmitter.emitter // Thrust emmiter handler object ); game.physics.enable(player.sprite, Phaser.Physics.ARCADE); player.spawn();; player.sprite.maxVelocity = player.maxVelocity; // Game input cursors = game.input.keyboard.createCursorKeys(); var style = { font: "bold 32px Arial", fill: "#fff", boundsAlignH: "center", boundsAlignV: "middle" }; var text = game.add.text( - 500, - 300, "Move with W,S and mouse. \n Switch to touch/click movement with TAB. \nToggle debug with SPACE. \nShoot with LMB. \ \nSwitch weapons with 1, 2, 3.", style); text.setShadow(3, 3, 'rgba(0,0,0,0.5)', 2); //Make resources group //var resources =; //Run the show_resources function located in main.js for (var i = 0; i < 250; i++){ var asteroid_brown = game.add.sprite(,, 'asteroid'); var rock = game.add.sprite(,, 'rock'); } game.physics.enable(asteroid_brown, Phaser.Physics.ARCADE); game.physics.enable(rock, Phaser.Physics.ARCADE); // We'll set the bounds to be from x0, y100 and be 800px wide by 100px high text.setTextBounds(0, 100, 800, 100); // this.spaceButton = this.input.keyboard.addKey(Phaser.KeyCode.SPACEBAR); // this.WButton = this.input.keyboard.addKey(Phaser.KeyCode.W); // this.SButton = this.input.keyboard.addKey(Phaser.KeyCode.S); // this.AButton = this.input.keyboard.addKey(Phaser.KeyCode.A); // this.DButton = this.input.keyboard.addKey(Phaser.KeyCode.D); // this.oneButton = this.input.keyboard.addKey(Phaser.KeyCode.ONE); // this.twoButton = this.input.keyboard.addKey(Phaser.KeyCode.TWO); Keys = { space: this.input.keyboard.addKey(Phaser.KeyCode.SPACEBAR), w: this.input.keyboard.addKey(Phaser.KeyCode.W), s: this.input.keyboard.addKey(Phaser.KeyCode.S), one: this.input.keyboard.addKey(Phaser.KeyCode.ONE), two: this.input.keyboard.addKey(Phaser.KeyCode.TWO), three: this.input.keyboard.addKey(Phaser.KeyCode.THREE), four: this.input.keyboard.addKey(Phaser.KeyCode.FOUR), five: this.input.keyboard.addKey(Phaser.KeyCode.FIVE), six: this.input.keyboard.addKey(Phaser.KeyCode.SIX), seven: this.input.keyboard.addKey(Phaser.KeyCode.SEVEN), tab: this.input.keyboard.addKey(Phaser.KeyCode.TAB), } // WEAPON CHANGING{player.setWeapon(Weapons.sniperWeapon.weapon)}, this); Keys.two.onDown.add(function(){player.setWeapon(Weapons.uziWeapon.weapon)}, this); Keys.three.onDown.add(function(){player.setWeapon(Weapons.AK47LikeWeapon.weapon)}, this); // OTHER KEYS () { showDebug = true; }, this); () { if (player.movementType == "keyboardMouse") { console.log("touchMouse") player.movementType = "touchMouse" } else { console.log("keyboardMouse") player.movementType = "keyboardMouse" } }, this); game.input.keyboard.addKeyCapture([ Phaser.Keyboard.W, Phaser.Keyboard.A, Phaser.Keyboard.S, Phaser.Keyboard.D, Phaser.Keyboard.SPACEBAR, Phaser.Keyboard.ONE, Phaser.Keyboard.TWO, Phaser.Keyboard.THREE, Phaser.Keyboard.FOUR, Phaser.Keyboard.FIVE, Phaser.Keyboard.TAB, ]); } update.js: function update() { player.sprite.rotation = game.physics.arcade.angleToPointer(player.sprite); if (player.movementType == "keyboardMouse") { if (Keys.w.isDown) { game.physics.arcade.accelerationFromRotation(player.sprite.rotation, player.positiveAcceleration, player.sprite.body.acceleration); // this.isEmmiter=true; this.txtW2 = "Is W still down? YES"; if (!this.isThrustEmitter) { player.emitter.start(false, 3000, 5); this.isThrustEmitter = true; } } else if (Keys.s.isDown) { game.physics.arcade.accelerationFromRotation(player.sprite.rotation, (-1) * player.negativeAcceleration, player.sprite.body.acceleration); this.txtS2 = "S still down? YES" this.isThrustEmitter = false; } else { player.sprite.body.acceleration.set(0); this.txtW2 = "Is W still down? NO"; this.txtS2 = "S still down? YES" this.isThrustEmitter = false; } } // if (this.WButton.downDuration(250)) // { // this.txtW = "W was pressed 250 ms ago? YES"; // } // else // { // this.txtW = "W was pressed 250 ms ago? NO"; // } // if (this.SButton.downDuration(250)) // { // this.txtS = "S was pressed 250 ms ago? YES"; // } // else // { // this.txtS = "S was pressed 250 ms ago? NO"; // } if (game.input.activePointer.isDown) {; if (player.movementType == "touchMouse") { game.physics.arcade.accelerationFromRotation(player.sprite.rotation, player.positiveAcceleration, player.sprite.body.acceleration); if (!this.isThrustEmitter) { player.emitter.start(false, 3000, 5); this.isThrustEmitter = true; } } } else { if (player.movementType == "touchMouse") { this.isThrustEmitter = false; player.sprite.body.acceleration.set(0); } } //THRUST EMITTER if(this.isThrustEmitter) { //player.emitter.on = true; } else { player.emitter.on = false; } // We have to calculate the vector for thrust emitter var px = Math.cos(player.sprite.rotation) * 1000; var py = Math.sin(player.sprite.rotation) * 1000; px *= -1; //So it goes from the 'back' of the ship py *= -1; //So it goes from the 'back' of the ship player.emitter.minParticleSpeed.set(px / 2, py / 2); player.emitter.maxParticleSpeed.set(px, py); player.emitter.emitX = player.sprite.x; player.emitter.emitY = player.sprite.y; // bullets.forEachExists(screenWrap, this); } I would like the player ('ship' sprite) to not go through the asteroids ('asteroid_brown' and 'rock' sprites) but whenever I try to add physics to them or try to change them the game stops working. Thanks in advance, Fede
  7. Spritesheet Editor in web Create spritesheets by placing images in cells, set up sizes and offsets of your columns and rows. Download generated JSON file with coordinates of each of your sprite and PNG spritesheet image. Autosave of your progress, sharing, collaboration work; Development of spritesheet is not easiest in terms of 20 or 100 sprites. In case of WebGL games it's quite necessary to have one spritesheet instead of using separated images each iteration of rendering. Tool is useful for designers and developers who are interested in development 2D, 2.5D games. I'm seeking for React developers to build this app for community for free. The project consists of 3 phases. First one gives you main functionality for generating PNG and JSON. Next one will be about keeping information on server-side in database with social network authorization, it will be premium functionality for really cheap 3$/month subscription per account. Last phase will introduce collaboration mode, invite by link and multiply spritesheets management. Please, leave your comments about features you want to have, development already started. Thanks, cheers!
  8. My player sprite doesn't collide with the tilemap at all. I've also tried enabling physics for the layers and map, which doesn't work either. I also checked all other topics in this forum about collisions with a sprite and tilemap, but I still can't figure out the error. Here's my code: import { findObjectsByType, movePlayerTo } from './src/map.js'; import { checkPlayerMovement } from './src/movement.js'; const game = new Phaser.Game(window.innerWidth, window.innerHeight, Phaser.AUTO, '', { preload: preload, create: create, update: update, render: render }, false, false); //The player sprite and properties let player, properties = {}; //Settings const worldScale = 2; //Helpers let cursors; //Layers let map, background, walls; function preload() { //Load tiles game.load.spritesheet('tiles', 'assets/Tileset.png', 16, 16); game.load.tilemap('SafeZone1', 'assets/SafeZone1.json', null, Phaser.Tilemap.TILED_JSON); } function create() { //LOGIC game.stage.backgroundColor = "#1c1117"; game.physics.startSystem(Phaser.Physics.ARCADE); setMap('SafeZone1'); player = spawnPlayer(50, 50); cursors = game.input.keyboard.createCursorKeys(); movePlayerTo(player, findObjectsByType('playerStart', map, 'objects')[0], worldScale);,; //Spawn the player function spawnPlayer(x, y) { const p = game.add.sprite(x, y, 'tiles', 132); game.physics.enable(p); p.scale.setTo(worldScale); p.body.collideWorldBounds = true; return p; } //Add the map with the given name and manipulate it accordingly. function setMap(mapName) { map = game.add.tilemap(mapName); map.addTilesetImage('Tileset', 'tiles'); map.setCollisionBetween(0, 300); //All tiles walls = map.createLayer('walls'); walls.scale.setTo(worldScale); background = map.createLayer('background'); background.scale.setTo(worldScale); background.resizeWorld(); } } function update() { game.physics.arcade.collide(player, map); if(cursors) checkPlayerMovement(player, cursors, 150); } function render() { game.debug.bodyInfo(player, 5, 20); } map.js export function findObjectsByType(type, map, layer) { var result = []; map.objects[layer].forEach(function (element) { if ( === type) { element.y -= map.tileHeight; result.push(element); } }); return result; } export function createFromTiledObject(element, group) { var sprite = group.create(element.x, element.y,; Object.keys( (key) { sprite[key] =[key]; }); } export function movePlayerTo(player, element, worldScale) { player.x = element.x * worldScale; player.y = element.y * worldScale; } movement.js export function checkPlayerMovement(player, cursors, speed) { const vel = player.body.velocity; vel.x = 0, vel.y = 0; if(cursors.left.isDown) vel.x = -speed; if(cursors.right.isDown) vel.x = speed; if(cursors.up.isDown) vel.y = -speed; if(cursors.down.isDown) vel.y = speed; }
  9. Looking for a job

    Hello, programmers, designers, game enthusiasts and work with this entertaining game! We are Vietnamese. We are young people who have enjoyed playing games since childhood. We are passionate about them and now we create them. We love the work we do. We are approaching the technology of making games with html5. And we look forward to cooperating remotely with anyone who needs us. We have been doing game projects for partners putting them on their website. We can do everything from web programming, frontend, backend, web api, payment integration to in-game client. However, we have not done much gaming projects yet. We are young and want to challenge. We will take your project and take it seriously. You will not lose money if we do not work well. We can work both weekends and even in extreme weather. Please contact us if you are interested. Our English is very low. We will improve it. Get your CV via this email: We look forward to working with you and sharing your passion for an entertaining gaming world.
  10. Typescript vs Javascript

    Hello everyone, I've decided to start with PhaserJs, at the getting started page there is a sentence that reads "If you're coming from Flash / AS3 then we'd recommend giving a TypeScript a go"... And yes I coming pretty much from 12 years of Flash. Someone please could explain my what are the advantage of code in TypeScript and also recommend a IDE? Thanks in advance
  11. I have been haven some problems trying to replace a image in an existing Object. I have a example of the code I am using to do this.. The background image loads and shows on the canvas fine.. But when I call the handleReplaceImage function it doesn't replace the existing image, but adds the new image so I get the old and the new both in the same CreateJS Object.. So on the canvas I see two Slate Holes when it should be just the new one. So its overlaying.. How do I total replace SlateHole1.png with SlateHole2.png? Or remove SlateHole1.png from the CreateJS Object? I guess both would be worth knowing if anyone can help... var SlateHole=null; function init(){ stage=new createjs.Stage("Canvas"); createjs.Touch.enable(stage); var SlateHoleSrc=new Image(); SlateHoleSrc.src="images/SlateHole1.png"; SlateHoleSrc.onload=handleSlateHoleLoad; } function handleSlateHoleLoad(event){ SlateHole=new createjs.Bitmap(; stage.addChild(SlateHole); stage.update(); } function handleReplaceImage(event){ var SlateHoleSrc=new Image(); SlateHoleSrc.src="images/SlateHole2.png"; SlateHoleSrc.onload=handleSlateHoleChange; } function handleSlateHoleChange(event){; stage.update(); }
  12. Click event on sprite

    Basically I am making a cookie clicker type game for fun. I am trying to make the counter increase each time the sprite is clicked on but for some reason the click event on the sprite is never fired if i click on the sprite. I can't figure out why the click event isn't firing does anyone know why? Or a better way of doing this? <!doctype html> <html> <head> <meta charset="UTF-8" /> <title>Shook Clicker</title> <script src=""></script> </head> <body> <script type="text/javascript"> var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update }); var clicker; var clicks = 0; var scoreText; function preload() { game.load.image('clicker', 'assets/cookie.png'); } function create() { clicker = game.add.sprite(,, 'clicker'); clicker.anchor.set(.5); clicker.scale.setTo(.1,.1); clicker.inputEnable = true; scoreText = game.add.text(16,16, 'Computers Built: 0', {fontSize:'32px', fill: '#555'});, this); } function listener() { clicks++; scoreText.text = 'Computers Built: ' + clicks; } function update() { } </script> </body> </html>
  13. Hello guys! TL;DR: I'm seeking for team mates to build space 2.5D top view multiplayer deathmatch game with machine intelligence. I have working on "cruiserwars" game for a while. When I started it was huge plan for things which I want to have in this game, but getting fail by fail I realize situation. Right now I can say, what exactly can be done, why I'm making this features and can describe product's vision in three phases. My game is huge and I figured out that will be better to separate it to several small games as united products. First game I want to introduce there to find team mates, form a team and lead development to transform idea to real product. "Cruiserwars Arena" You have been involved in infinity war against others by playing for AI race in distant space in one of the space sectors. By following your main instinct, your role to get maximum amount of kills to keep your intelligence in cluster's database. Soon, main CPU will use your grabbed data for production of determination fleet against humans. Phases I. Infinity battle in a sector against bots. It will be first release with offline game mode, where you can fight against smart CPU built on top of machine learning technology. As a player you should take a first place in leaderboard with higher score of kills, but your scores will be flushed when if you die. Share with your score in social network and invite friends to play for higher score. II. As CPU become smarter, other players are too involved in battle as you. You should be really mastery to kill other players and bots and get higher score in leaderboard. Invite you friends in a game, fight against multiply enemies and show who is a best CPU ever made. III. You found that scores are data which can improve your skills and technologies. Use scores to enhance your spaceship details: cabin, wings, thrusters, turrets and other parts of your spaceship can become better look and performance. Show your spaceship's design and power and become first in leaderboard. Key features – Customized and destroyable spaceship's parts: wings, turrets, thrusters and sub-systems; – CPU becomes smarter by playing with you and other players by utilizing machine learning technology; – Leaderboard and unique spaceship's parts for winners; – Play through the browser, even from your mobile / tablet device along with desktop, anytime you want; – This game is only part of something upcoming (part of the bigger game). Already has As browser multiplayer games are still not investigated yet and there a lot of work should be done before implementing real features, better to say not a lot! – Scene management, assets loading, assets storage, set up lifecycle actions for your scene loading and switching; – Entities, commonly renderable objects on your scene, beside each of them has an actor who control the entity; – Actors, it's part of the logic which can manage input controllers and entity which they applied too (for ex.: PlayerActor and NPCActor); – Keyboard, mouse controllers; – REST services to retrieve information about specific player, sector and spaceship (client-side only with mocks). and other small features.... You see that a lot of features almost technical implementation of architecture. I'm worried about clean code which can be scaled soon, but as time is going and I'm prefer do not write tests on current stage. Tools and libraries – Javascript ES6-7 (Babel) with OOP way programming; – Webpack 2 for bundle building; – Node.JS webserver, node.js game server and node.js microservices (koa/express); – React to build user interface, server-side rendering behind the scene; – Pixi.js rendering engine to show graphics; – ESlint for code quality; – Axios and WebSocket API for communication; – MongoDB, redis to keep users data; – Passport.js for authorization process; – SCSS + postcss autoprexifer; – Docker to build images; – Amazon AWS as end delivery platform; –, skype, trello for visual communication and task management; Who is needed to accomplish the game? Hero #1 – Digital artist You will be responsible for drawing sprite graphics and leveling. For example to draw different parts of spaceships, asteroids, backgrounds with description of each of your work for end customer. Hero #2 – Machine learning back-end node.js developer You will be involved in development of game server and AI machine learning system, set up connection with mongoDB and redis. Hero #3 – Sound composer Write sounds for lasers, thrusters, explosions and other more, beside you will be engaged in development of music tracks for battle scenes. Hero #4 – Javascript front-end developer Build user interface for game elements, build FX and game logic on client side. Requirements – Experience building stuff based on your role, some resources to show; – Desire to build game by using best practices, do not make anything without understanding why are you doing this; – Listen for team-mates, follow direction of the product's vision; – Time to work with game more then 5 hours per week; About my self My name is Andy, I'm trying to make massive multiplayer space game in browser with absolute freedom. Before I have made a lot of experiments and right now time to make real game product with goal to get budget for next development. I'm working in banking sphere for several years at role of software engineer and basically spend my free time after work for game development. There, I want to show my self as product owner to enroll the business part of the game, beside to build top-notch visual solutions for a game as a developer. Better to say I'm working with both front-end and back-end part, with design of user interface and project management. What you will get if enjoy development? – Of course international experience, portfolio, knowledge; – Your own game and money at the end of development as shared revenue between all of team mates; – Team and partners who will help you in building your ideas in real; – Use last top-notch techs such as machine learning, did you ever dream to build killing machines? You are welcome. – Chance to get your own place in game studio if project will succeed. Contacts Skype: AndyTyurin Email: Thanks for reading, sorry for mistakes, I'm not native speaker. Hope you deals are going well, continue to have a nice day!
  14. RPG Dialogue System

    Hello, guys, I am trying since days to find an easy working solution for my game project. I want to add a simple dialogue system, similar to this of Pokémon, with just a dialogue box and some text appearing in it. Unfortunately, there is no tutorial which could explain or help me out with this, or I am not able to find one I got a .json file with all the dialogues (attached) and I want to call them into my actual state. For entering the dialogue I have already this, but the text wouldn't be displayed update: function(){ game.physics.arcade.collide(monk, buildings2_noWalk1, function(){console.log('buildings2');}); game.physics.arcade.collide(monk, buildings1_noWalk1, function(){console.log('buildings1')}); game.physics.arcade.collide(monk, mountains_nowalking1, function(){console.log('mountains');}); // Activate Dialogue Mode if(enter.isDown){ game.paused = true; //set game paused } // Set Dialogue if(game.paused){ console.log("Dialogue"); game.add.text(100, 100, "Test"); } Could someone help me out? I really just want it in a simple way, no complex scripting. Thanks a lot Best wishes Moonware dialogue.json
  15. I'm just starting out with Phaser and not sure why I shouldn't use TS. It seems better to me. Not sure if there are any benefits over using JS.
  16. Ajax inside phaser not working

    Hello I'm just trying to get a simple ajax function to work inside phaser just to play around with it. But I can't seem to get it to work. The function is just supposed to send two variables to PHP and get back a sentence where those two variables are part of it. But I only get the basic sentence back. And I have tried to use the function outside phaser with just an onclick bottom function, and their it works fine. So it must have something to do with phaser. heres the code in phaser And here is the php I have a sprite where i use the events.onInputDown.add function. But i only get While when i just use a botton in html and plane javascript i get
  17. Hello, I'm following a course with Phonegap and I have almost no time to study, if I do not do the project, I lose everything I invested. The problem is that I have to create a game (simple) created in javascript and make use of accelerometer, Phaser with its physics engine. If you can help me with a simple example. Thank you very much to all. a greeting
  18. Create a game

    Hello, I appeal to you because I run out of time. I'm following a course and I need to create a game (simple) that makes use of device accelerometer, the course is done with Phonegap, created with HTML, CSS, JAVASCRIPT and use PHASER, preferably the physics engine. If you can help me. Thank you very much
  19. Hi all - new to the forum! I've been working on something recently and had to use a bit of a wonky (slow) workaround to get the desired effect and was wondering whether anyone here had had the same issue. I'm finding it difficult to blend two images together using a bitmask without first rendering the results to a separate canvas, then drawing the blended image from the other canvas to the 'main' canvas. All my images are the same rectangular shape, and also the same size. For simplicity let's say that the first image is solid blue and the second image is solid green. The bitmask image is a left-to-right gradient ranging from transparent to solid black. What I'm trying to achieve is to make the green image transition into the blue image without, as I say, using a separate canvas and then transplanting the result into the main canvas. Here's the JS that I'm using at the moment to achieve this in a separate canvas: context.drawImage(sprites, 96, 0, 32, 16, 0, 0, 32, 16); // Draw bitmap image context.globalCompositeOperation = 'source-in'; context.drawImage(sprites, 0, 0, 32, 16, 0, 0, 32, 16); // Draw green image over the bitmask context.globalCompositeOperation = 'destination-over'; context.drawImage(sprites, 32, 0, 32, 16, 0, 0, 32, 16); // Draw blue image under the current canvas content I should probably mention that all my sprites are in a single image referenced by 'sprites'. The reason why I'm forced to use a separate canvas is because I need to *first* render my bitmask on a transparent canvas (which my main canvas isn't, there's a solid background colour) in order to retain the bitmask's transparency. In this contrived example I could just create a transparent image sized gap in the correct region of the main canvas, then perform all my operations there. This is fine when the shapes I'm rendering cover the entire sprite rectangle, although I have a case where I'm rendering circle & diamond shaped sprites and this would result in transparent gaps appearing around the resulting shape in the canvas. I've been referencing this article in my use of 'globalCompositeOperation': Am I approaching this in a reasonable way or is there a better tactic to achieve this?
  20. Phaser with Kotlin

    Hello. I've made a repository with a template and ported 568 examples of Phaser with Kotlin. Kotlin is a modern statically typed programming language that compiles to Javascript and now it can be used to code Phaser games!
  21. I,m trying to develop something like this using Babylon.js (The example is implemented in Unity 3D): I suppose this can be implemented using a shader. The user can move a sphere with the inverted normals, and the shader will have to calculate if this sphere is painted depending on its position in the z buffer. Is it possible to do this using babylon ShaderMaterial? Thanks in advance.
  22. Hi All! Do you have experience in HTML Game Developement? And the following skill set? JavaScript, JQuery HTML/HTML5 CSS/CSS3 Pixi JS / Spine JS Google Closure Active knowledge of English Send me a PM if you would like to know more details about this. Relocation is required and VISA is supported. Please don't contact me if you are selling services from company's. Only looking for people who are willing to move to Prague and have a full time contract with us.
  23. Hey Guys! I have a question! I wanted to know if there is a way that when you click on a sprite can you set the css value for display to none for all other sprites - so essentially, when one sprite is clicked(chosen) all others display:none the chosen is set to display:block. I'm going for the effect of click on one character and it hides the others so you see your selected character and there bio(name, description etc...) appears next to them as display: block whereas all others are display: none. I am struggling as I can't call the sprite elements within the canvas by flat css - so was wandering if and how it is possible to achieve my hoped functionality! This might be something for you @Wingnut? Thankss! Mezz out!
  24. Part 7 is here, concluding our series: Check out the demo: Thanks for the support throughout the series! Let me know if you want to see more tutorials like these ones.
  25. I'm looking for ways to optimize a scene I created in the Playground. This scene is based on previous work from another thread, I just added some objects and logic to mimic a small game. It uses native CannonJS for the PFS-camera and movement of the monster models. I used the code and model from the instances demo. From line 16, you can turn on and off physics for the monsters, skeletal animations, the skybox, trees, shadows, procedural textures(grass), and whether or not the monsters should lookAt and follow the player. As well as specify the amount of trees + the range and amount of monsters. I'm only hitting around ~30 FPS with this example. Is a scene such as this too heavy for WebGL and browsers? The trees are instances, so unless I clone and merge them, I don't see what could be changed there. Maybe a smaller, compressed texture. The monster models all have skeletons and animations, so no instances or merging can be used here. Disabling physics seems to give some FPS boost, so maybe using a worker would do some good in this example. I'll give this a try, and see what effect it has on overall performance. Here's a minimized version, with most things stripped, and 50 monsters without animations.