Search the Community

Showing results for tags 'canvas'.



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 354 results

  1. I have this idea for creating a character customization system. The system would be implemented as follows. 1) Organize a base template sprite sheet with character components arranged in a composition for future compositing. Example: Lets assume a full body template for a characters design is 125 by 125 consisting of head, body, and leg components. The head component of the character would use 25 pixels and would be isolated on separate parts of the sprite sheet that occupies the respective pixels while the rest of the 100/125 pixels are blank. The same would be done for the body and leg components. 2) Bind the components together via some sort of linked list or maybe even graph based implementation. I'm still learning about graphs and am thinking they're best for this system given compositing more complex sprite sheets will involve layers. Any advised implementations or any kind of information on graphs associated with player creation systems is highly appreciated. I think this is a great opportunity to practice graphs. 3) Next there will be an interface that allows the player to choose the color and textures of each of these components. The player will confirm and submit their design when finished. Now that the player has submitted their design, I'm a bit puzzled about the next step and have a few ideas on composing the data. 4a) Use Phaser api to turn the data into bitmaps? I don't know much about this implementation yet since I'm still learning how to utilize bitmaps and how Phaser handles bitmaps 4b) Composite the items on a canvas and store it in a uri using the canvas to url method. I also lack experience with api but I definitely can see how it would work. 5) Ideally I'll save the data to a database and retrieve them via player credentials. I'm not sure if I'm over complicating things or not so any feedback would be appreciated. I use Phaser but any html5 based idea or solution should be fine.
  2. Made anything cool with pixi.js? Post it up here and share it with the world! Whether it's a cool game demo, a fully fledged website or some tripped-out crazy experiment, we would all LOVE to see it! To get the ball rolling, here are some pixi.js projects that exist out on the internets: games: http://www.goodboydigital.com/runpixierun/ http://www.theleisuresociety.co.uk/fightforeveryone/ http://flashvhtml.com/ experiments: http://gametest.mobi/pixi/morph/ http://gametest.mobi/pixi/balls/ http://www.goodboydigital.com/pixijs/bunnymark/
  3. 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
  4. Hi I have an image like the picture below. I need to resize this image.(between x2 and x10) When I resized with Canvas's own features, I couldn't get the image I wanted. The image was pixelated. I used OpenCV's javascript library for this. (To be able to do interpolation) But here I did not get the exact result I wanted and it was slow in speed(40 - 60 ms). The resizing speed should be between about 10 - 20 ms. Then I wanted to write an algorithm myself, but I could not prevent pixelation, and the image I wanted was not revealed. In fact, if I can make gradient for each pixel according to the pixels around it (right, left, down and up), I think I can get the image I want. Is there anyone who can help me with this?
  5. 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!
  6. Welcome Everyone A game of connecting between pieces? Can anyone help me? i use adobe animate type HTML5 canvas ? why the code not work ?? Pagel.fla
  7. I am trying to develop a simple Canvas game, but I'm currently stuck at making the enemies display itself. Heres the code I'm using : <script type="text/javascript"> // SETUP INICIAL var canvas = document.getElementById('canvas'), ctx = canvas.getContext('2d'); var innerWidth = 360, innerHeight = 620; canvas.width = innerWidth; canvas.height = innerHeight; // VARIAVEIS var score = 0, lastTime = 0; // TECLAS DE MOVIMENTAÇÃO window.onkeydown = pressionaTecla; function pressionaTecla(tecla){ if(tecla.keyCode == 38) { player.y = player.y - 10; } if(tecla.keyCode == 40) { player.y = player.y + 10; } if(tecla.keyCode == 39) { player.x = player.x + 10; } if(tecla.keyCode == 37) { player.x = player.x - 10; } } // PERSONALIZAÇÃO DO PLAYER var player = { }, player_width = 100, player_height = 105, player_img = new Image(); player_img.src = 'images/spaceship.png'; // OBJETO DO PLAYER player = { width : player_width, height: player_height, x : innerWidth/2 - player_width/2, // centralizar y: innerHeight - (player_height+10), //deixar em baixo power : 10, draw: function(){ // FUNÇÃO QUE BLOQUEIA O OBJETO PLAYER SAIR DO CANVAS if(this.x <= 0 ){ this.x = 0; }else if (this.x >= (innerWidth - this.width)) { this.x = (innerWidth - this.width); } if(this.y <= 0 ){ this.y = 0; }else if (this.y >= (innerHeight - this.height)) { this.y = (innerHeight - this.height); } ctx.drawImage(player_img, this.x, this.y, this.width, this.height); } }; // FUNDO DE GALAXIA *codigo fonte do fundo retirado do site codepen.io https://codepen.io/LeonGr/pen/fdCsI var stars = [], // Array that contains the stars FPS = 60, // Frames per second x = canvas.width; // Number of stars for (var i = 0; i < x; i++) { stars.push({ x: Math.random() * canvas.width, y: Math.random() * canvas.height, radius: Math.random(), vx: Math.floor(Math.random() * 10) - 5, vy: Math.floor(Math.random() * 10) - 5 }); } function updatefundo() { for (var i = 0, x = stars.length; i < x; i++) { var s = stars[i]; s.x += s.vx / FPS; s.y += s.vy / FPS; if (s.x < 0 || s.x > canvas.width) s.x = -s.x; if (s.y < 0 || s.y > canvas.height) s.y = -s.y; } } function drawfundo() { ctx.clearRect(0,0,canvas.width,canvas.height); ctx.globalCompositeOperation = "lighter"; for (var i = 0, x = stars.length; i < x; i++) { var s = stars[i]; ctx.fillStyle = "#fff"; ctx.beginPath(); ctx.arc(s.x, s.y, s.radius, 0, 2 * Math.PI); ctx.fill(); } } // PERSONALIZAÇÃO DO INIMIGO var enemyArray = [], enemyIndex = 0, enemy_width = 35, enemy_height = 43, enemy_timer = 1000, enemy_img = new Image (); enemy_img.src = 'images/spaceship.png'; // OBJETO DO INIMIGO function enemy (x, y, dx, dy, enemy_img, enemy_width, enemy_height, rotation){ this.x = x; this.y = y; this.dx = dx; this.dy = dy; this.img = enemy_img; this.width = enemy_width; this.height = enemy_height; this.rotation = rotation; enemyIndex++; enemyArray[enemyIndex] = this; this.id = enemyIndex; ctx.drawImage(this.img, this.x, this.y, this.width, this.height); this.update = function(){ this.y+= this.dy; this.x+= this.dx; this.draw(); } this.delete = function(){ delete enemyArray[this.id]; } this.draw = function(){ ctx.drawImage(this.img, this.x, this.y, this.width, this.height); } } // FUNÇÃO DE CRIAR INIMIGOS function create_enemy(){ var x = Math.random() * (innerWidth - enemy_width); var y = -enemy_height; var dx = 3; var dy = 3; var rotation = Math.random(); new enemy (x, y, dx, dy, enemy_img, enemy_width, enemy_height, rotation); } // LOOPING DA ANIMAÇAO (MAINFRAME DO GAME) function gameLoop(currentTime){ requestAnimationFrame(gameLoop); ctx.clearRect (0,0, canvas.width, canvas.height); drawfundo(); updatefundo(); // SCORE ctx.font = '17px arial'; ctx.fillStyle = '#fff'; ctx.fillText('PONTOS: '+score , 15, 30); // ENERGIA ctx.font = '17px arial'; ctx.fillStyle = '#fff'; ctx.fillText('ENERGIA '+player.power , innerWidth-110, 30); // JOGADOR player.draw(); if(currentTime >= lastTime + enemy_timer){ lastTime = currentTime; create_enemy(); } create_enemy(); } gameLoop(); </script> Everything is working fine except the enemies not showing. Already checked the images folder and it's all set up like I've puted in the code. Dev tools console does not show any errors. Enemie lines are " // PERSONALIZAÇÃO DO INIMIGO " and "// OBJETO DO INIMIGO" Please help!
  8. Kaetram Kaetram is an open-source game-engine created to aid those interested in entering the game development realm. The codebase is simple, clean, and intuitive. This project is intended to be used as a learning tool. The original idea is based on Little Workshop's demo game – BrowserQuest (BQ). This game uses original BQ assets as well as custom-made ones. The entire code-base has been written from scratch, using more modern approaches. GitHub Repo – https://github.com/Veradictus/Kaetram-Open Live Version – https://kaetram.com Join us on Discord – https://discord.gg/MmbGAaw Patreon – https://www.patreon.com/kaetram Features BQ was intended as an experiment to showcase HTML5 capabilities, since then, technology has only served to advance. Kaetram contains a lot of ideas and features that builds on top of its predecesor, a couple are: Multiplayer using Socket.IO Enhanced rendering engine (includes dynamic lighting, overlays, animated tiles) Region system (client receives only necessary data and saves it) Questing and achievements system. Plugin-based combat system (for bosses/special enemies). Supports RESTful API. Discord server integration. Cross-server private messaging and interactions. And much more Regions The region system sends data to the client according to the map data of the server. The collisions are checked both server-side and client-side to avoid cheating. The region system makes use of dynamic tiles, which are unlocked according to a player's progress. Furthermore, there is integrated support for instancing, where we can use a section of the map (or clone it) and reuse it for certain groups of players. The instancing is perfect for activities such as minigames, where we will want to run multiple instances in parallel. Tilemap Kaetram is built with modularity in mind, as such, the client supports multiple tileset parsing. The tilemap can easily be constructed using Tiled Map Editor. Using our map parsing tool you can easily export your creation to both the client and the server. Kaetram Hub There is also support for a hub server. This can help connect servers across one another, allowing players to interact with their friends across them in a variety of ways (private messaging and guilds). Furthermore, the hub serves as a gateway for determining what server to place players in. If a server is full, it simply returns another server that has room for the player.
  9. Hi, I have encounted something strange and I don't know how to fix it. I have git cloned the examples page onto a local webserver and the plugin projection, 3D Camera spine layers works fine. But when I try to reproduce it into my electron app, the layers start acting like this. How can I fix this? I've tried everything, why does it work on the examples html page but not on my html page. thanks!
  10. Hi guys I met a very difficult problem, this problem has been bothering me for more than a month My game sometimes has a part of the image rendering can not come out, but its alpha channel rendering is no problem I have no idea about this problem. Does anyone know what caused it? here's my problem: I'm using: phaser 2.13.3 with CANVAS mode dragonbones 5.6.2 electron 5.0.11
  11. Hi everyone, I have a picture that I draw pixel by pixel on the canvas. Size of the image: 512 * 256. When I make this picture 1536 * 768, the image looks very bad. I think I can use interpolation to fix this. But I couldn't find a good javascript library. It didn't work in the libraries I found. Is there anyone who can help me with this?
  12. I am trying to add Lottie animation in the Phaser 3 in my game. But I am not able to add. Lottie Animation link. This is how I am adding into my code : this.animation = bodymovin.loadAnimation({ container: document.getElementById("game"), // Required path: "assets/json/RainLoop.json", // Required renderer: "canvas", // Required loop: true, // Optional autoplay: true, // Optional name: "Hello World", // Name for future reference. Optional. }); But here problem is, this animation is attaching to the HTML DOM elements and so that the animation comes above the Phaser game canvas, Due to what I am not able to interact with my phaser game elements.
  13. I have recently discovered a couple of useful pages about improving the speed of canvas operations. I will give links to those pages at the bottom of this item but first let me describe a good speed-up I got as a result of reading them. In my program The Forest (myforest.uk) I am continually looking for ways to improve the speed of drawing scenes. I have made several improvements already but this new one is very useful indeed. I have a Scene object with method draw() which is invoked whenever the observer moves or turns. From its earliest incarnation this method has reported how long it takes, so I can monitor what is going on. Its first line is var t0 = new Date ().getTime (); // ms and its last line calculates a difference and displays it in a status line on the HTML page: var dt = new Date ().getTime () - t0; forest.infoDiv.innerHTML = me.toString () + ", Drawn in " + dt + "ms (" + this.nDrawIms + " images)"; I have augmented that so that the constructor of forest.scene includes this.drawingTimes = ''; and a new final line at the end of draw(): this.drawingTimes += dt + '<br>'; I can cause drawing of the same scene over and over again by clicking a button labelled 'Look level' (as opposed to up or down buttons which would draw a slightly different view of the scene). This means I can build up a long string of forest.scene.drawingTimes. Then in a testing version I can press an otherwise unused key to dump those times as the innerHTML of a div in my HTML test page. The <br>s mean that I get a vertical column of values which I can then select, copy and paste into a spreadsheet (I use OpenOffice). Then it is easy to get the mean and standard deviation of the column. I did that twice for a large number of values. First with my last released version of The Forest and then with a tiny enhancement so that just before every time drawImage(im, x, y, width, height) is called I do this: x |= 0; y |= 0; Those are bitwise OR operations and their effect is simply to chop off the fractional parts of the screen coordinates x and y. This means that drawing starts on an exact pixel and does not require interpolation. The results: without the truncation (ORing) the mean time was 140.9ms with a standard deviation of 35.3ms; truncated the mean was 85.7ms and standard deviation 23.7ms. That is a very significant and useful improvement, so it will be going into my next version. The scene drawn here involved 1,693 calls to drawImage(), scaling each image (tree, ground, and other features) differently each time. From this big improvement I deduce that once drawImage() starts on an integer pixel then it uses integer pixels in the destination to decide where to get pixels from in the original image for scaling. In hindsight this is rather obvious really but I thought it would be useful to others to see how I went about proving the effect. I have noted before in this forum that the drawing time varies quite widely (as shown by the standard deviations) and I still attribute that to the workings of the garbage collector in the background. I should also point out that so far I have only measured this in FireFox. If you want to see more clearly what I am taking about, The Forest is at www.myforest.uk - from the initial map use the button (or key) to go to the scene. The pages which prompted this are: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas https://www.html5rocks.com/en/tutorials/canvas/performance/
  14. Hi, I'm a designer and I'd like to reach out to others for input or even collaboration. Lots of my javascript work is on github in the spirit of sharing and learning together. Like an open source sketchbook. I like making small experiments that might be included in something bigger. I often play with mechanics, audio and visual elements to look for interesting things : http://type76.com As you can see, it's lots of generated, three.js and canvas stuff, with a game dev leaning. I'm keen to go in new directions too. It's hard to find interest among my social circles, so I'm reaching out here to see if people are into this kind of thing. It's not business. It's about hitting ideas off each other, collaboration, fun and learning together. Maybe we can make an itch.io page if there is the will. You're welcome to join the discord server : https://discord.gg/KUqcuWu I'd love to see your experiments. Here or on discord. Things that aren't full games, but are fun and interesting concepts. This seems the place to look for like minded folks. Have you got a sketchbook? Is there a good CMS for this? I might be doing it wrong. Are there any other communities for this apart from discord servers full of revshare projects?
  15. My game does not scale correctly when the browser loads the game while the window size is made smaller. Another scenario is while in game state, the game will resize correctly, If I try to make the window bigger once again the game will be made out of scale and not usable really. this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
  16. Hi everyone. For the last few months I’ve been working on a simple HTML5 2D side scrolling action game called Theraxius. It's nothing new and revolutionary, it's more like an evolution of different technology. The game also includes a level editor so you can create your own levels. Engine (all game logic and level editor) is written completely in JavaScript, no download is required. Just load and play. Level data (stored in JSON format in the database) is exchanged thru Ajax calls. Server side is written in PHP. All images and sounds are preloaded from the server before play. The game uses HTML5 features like canvas, Fullscreen API, Pointer Lock API, Audio,… At this moment only Chrome and Firefox are supported. The game is meant to be played on PC, phones and tablets are not supported. In the next weeks I’ll try to post some videos, try to add registration (for newsletter and later for public test). Release date: when it's done Official page: theraxius.com Screenshots (for bigger images, please visit official page):
  17. Hi Everyone, I want to create same thing like this in phaser 3 using graphics library or by any other way. I cannot find compatible code for replacement in graphics library. Any help will be highly apprecited https://codepen.io/kangax/pen/dajwE Many Thanks
  18. Hi all, I am doing a test to a client who ask me to build a dynamic using a sequence of 3D rendered images, I told him than that is not the right way in WebGl, the correct is to convert the 3D objects and use than. But he said than right now they can not do that. So I tryed to use Dynamic Texture with canvas method and it works, but I wanna know if somebody knows a way to preload the sequence of images in BJS, to get better? Because I think that has a delay right now about the loading issue. You can see it here http://iprojects.space/upwork/laval/ Thanks
  19. Shex

    Image is pixelated

    Hi I'm trying to run my game on a mobile device with the Phaser 3 framework and sprites are rendered as very pixelated images. I'm running the game through the Facebook web player. I'm using a Samsung Galaxy S6 device which the resolution is 1440x2560 with a device pixel ratio of 4. I have setup the same configuration on my PC through the Chrome mobile debug view (1440/2560 with pixel ratio of 4) and the images look way better. I have attached two screenshot of the PC (good) and mobile (bad) devices to show the difference. The game is rendered as CANVAS and I'm using the window.innerWidth and window.innerHeight to define the sizes. Does anyone have any insight about what's going on?
  20. Today I got a headache from how... why... phaser3 handles the camera.setZoom(); - First thing I learned: all bodies need to be recalculated after .setZoom. - in WebGL works as expected. - in Canvas, Tilemaps are huge, the zoom isn't on point and even by recalculating the bodies, collision is way off. This could be reproduced by using this code and setting WebGL / Canvas. The code behaves differently depending on which you choose, and neither of both has a valid result. Am I missing something? Game config: // Game config type: Phaser.WEBGL, width: WIDTH, height: HEIGHT, scene: Level, resolution: 1, pixelArt: true, antialias: false, hidePhaser: true, roundPixels: true, backgroundColor: '161C22', zoom: 1, physics: { default: 'arcade', arcade: { gravity: { x: 0, y: 250 }, debug: true } }, tilemaps and camera: // Tilemap method setMap() { // # Add Tilemap this.config.map = this.make.tilemap({ key: 'map', tileWidth: 8, tileHeight: 8 }) const tileset = this.config.map.addTilesetImage('tilemap'); // # Add Tilemap Layers this.config.layers.background = this.config.map.createDynamicLayer(0, tileset); this.config.layers.midground = this.config.map.createDynamicLayer(1, tileset) this.config.layers.ground = this.config.map.createDynamicLayer(2, tileset); this.config.layers.forground = this.config.map.createDynamicLayer(3, tileset); this.config.layers.water = this.config.map.createDynamicLayer(4, tileset); // # Configure Tilemap Layers // replace with array of actual bodies this.config.layers.ground.setCollisionBetween([]); this.config.map.objects[0].objects.forEach((obj)=>{this.setMapObject(obj)}); // # Configure z indexes this.config.layers.background.setDepth(0); this.config.layers.midground.setDepth(1); this.config.layers.ground.setDepth(2); this.config.layers.objects.setDepth(3); this.config.layers.enemies.setDepth(4); this.config.layers.player.setDepth(5); this.config.layers.effects.setDepth(6); this.config.layers.water.setDepth(7); this.config.layers.forground.setDepth(8); this.config.layers.overlays.setDepth(9); this.config.layers.ui.setDepth(10); this.setTransition(); } // # Configure main camera const m = this.config.map; this.physics.world.setBounds(0, 0, m.widthInPixels, m.heightInPixels, true, true, true, true); this.cameras.main.setBounds(0, 0, m.widthInPixels, m.heightInPixels); this.cameras.main.setZoom(8); this.cameras.main.setRoundPixels(true); this.cameras.main.useBounds = false; this.config.layers.ground.setCollisionBetween(0, 8000); // add sprites this.config.player = new Player({ scene: this, x: 20, y: 30}); this.cameras.main.startFollow(this.config.player); this.physics.add.collider(this.config.player, this.config.layers.ground); Any thoughts, on this, would be helpful.
  21. Hello everyone! I'm trying to accomplish the following task: - When there is a change of state I want to take a screenshot of the canvas, show to the user while the state is changing. Now I read that I should use canvas.toDataURL to obtain the base64 encoded Image. I can't understand the steps to accomplish this task. 1) I save the URL with canvas.toDataURL(). 2) I should convert the base64 to an image right? 3) I should add the Image to the cache OR i Should do a load.image? 4) The operation should be async right? Because in my trying the debugger console is saying that the image hasn't been retrieved and I don't understand how I can make toDataURL (or the conversion from base64 to png) async because there are no methods. Thanks for the help!
  22. Hi, I am trying to display only the text content which is there in pixi example port. Everything is working fine in all the browsers except safari. Earlier it was working fine but from past 2 days it is showing only the white screen. All the assets and sounds are loading in background and I am able to play the sound and all but there is no visibility. Is there any specific reason for this or am I missing something ?. I have added the example script also. Any help will be appreciated. Thanks in advance. var app = new PIXI.Application(800, 600, {backgroundColor: 0x1099bb}); var element = document.getElementById('gameCanvas'); element.appendChild(app.view); var basicText = new PIXI.Text('Basic text in pixi'); basicText.x = 30; basicText.y = 90; app.stage.addChild(basicText); var style = new PIXI.TextStyle({ fontFamily: 'Arial', fontSize: 36, fontStyle: 'italic', fontWeight: 'bold', fill: ['#ffffff', '#00ff99'], // gradient stroke: '#4a1850', strokeThickness: 5, dropShadow: true, dropShadowColor: '#000000', dropShadowBlur: 4, dropShadowAngle: Math.PI / 6, dropShadowDistance: 6, wordWrap: true, wordWrapWidth: 440 }); var richText = new PIXI.Text('Rich text with a lot of options and across multiple lines', style); richText.x = 30; richText.y = 180; app.stage.addChild(richText);
  23. Hello, I'm seeing this behaviour that I can't understand, when applying a tint color to a sprite while using canvas as renderer. Right now for CORS reasons we're forced to use canvas in our app. I say this because in webgl the issue doesn't happen. The thing is the we're cutting images into stripes and applying a tint to each stripe, but this creates a line between the stripes: https://codepen.io/rhernando/pen/8fb06d28861d63ca5a6868f88c71f150?editors=0010 Just click the button to apply/remove the tint and you'll see the issue. Why this happens?, is there a way around this or is just what we get in canvas? Best, Rodrigo.
  24. How to make click Pixelperfect on Canvas DEMO + Tutorial https://leoche.github.io/Pixelperfect-Click-Canvas/ Summary There is no easy way to draw something and capture a pixel perfect click on it with HTML5 canvas. But there is a trick! We can attribute a random color to each Sprite we create then on a new blank buffer canvas, draw all sprites but only with their respective colors. Capture mouse input coordonates on real canvas then look the color of the pixel on the buffer canvas then compare this color with your sprites. If colors matches you clicked on this sprite! Tada! Real pixel perfect inputs! Initial Setup I took 3 sprites. So Basically here, we have a Main class which have an Array of Sprite(x, y, img) instances: this.sprites = [ new Sprite(100, 100, this.imgs.bed), new Sprite(52, 146, this.imgs.table), new Sprite(80, 135, this.imgs.z) ] I had to set coordonates to make those sprites overlaping each other The class for Sprites is pretty simple: export default class Sprite { constructor(x, y, img) { this.x = x this.y = y this.img = img } render (ctx) { ctx.drawImage(this.img, this.x, this.y) } } For this example i didn't add a z or depth property to Sprites, we admit in this example that Sprites ordering is made by their position in array. I set up a time loop to call render which call render on each Sprite: setInterval(() => this.render(), 1000 / 30) ... render () { ... this.sprites.forEach( sprite => { sprite.render(this.ctx) }) } Result: Real things coming up First we need to generate a random color for each sprites and make a new method to render the image but with only one Color. constructor(x, y, img) { this.x = x this.y = y this.img = img this.name = this.img.id.replace('img-', '') // Return 'bed', 'table' or 'z' this.id = Math.floor(Math.random()*16777215).toString(16); // Return a random HEX Color console.log("Created '" + this.name + "' with color #" + this.id); //We want here to see what color is generated for this sprite } Console returns Now we want to create a method renderColor with a canvas buffer, So we just need to create a canvas with img sizes, fill with generated color then drawImage with destination-atop composition. renderColor (ctx) { var buffer = document.createElement('canvas'); buffer.width = this.img.width; buffer.height = this.img.height; var bx = buffer.getContext('2d'); bx.fillStyle = '#' + this.id bx.fillRect(0,0,buffer.width,buffer.height); bx.globalCompositeOperation = "destination-atop"; bx.drawImage(this.img,0,0); ctx.drawImage(buffer, this.x, this.y) } For debug purposes we can now see the result if we update the render to render those colors sprites: render () { this.sprites.forEach( sprite => { sprite.render(this.ctx) sprite.renderColor(this.ctx) //DEBUG }) } Which give us this result: Create a global buffer for all this color sprites in Main constructor and render color sprites to it instead of the real canvas this.inputCanvas = document.createElement('canvas') this.inputCanvas.width = this.canvas.width this.inputCanvas.height = this.canvas.width this.inputCanvasCtx = this.inputCanvas.getContext('2d') ... render () { this.sprites.forEach( sprite => { sprite.render(this.ctx) // Previously: sprite.renderColor(this.ctx) sprite.renderColor(this.inputCanvasCtx) }) } then add an event listener to the real canvas and get pixel informations on the buffer canvas this.canvas.addEventListener('click', event => { let color = this.inputCanvasCtx.getImageData(event.layerX, event.layerY, 1, 1).data }) Convert the color data to HEX, and just compare with existing sprites! this.canvas.addEventListener('click', event => { let color = this.inputCanvasCtx.getImageData(event.layerX, event.layerY, 1, 1).data let hexColor = ("000000" + this.rgbToHex(color[0], color[1], color[2])).slice(-6) console.log('You just clicked on color #' + hexColor) let sprite = this.sprites.filter(sprite => sprite.id === hexColor) // You now have the sprite yea! }) ... // RGB Util rgbToHex(r, g, b) { if (r > 255 || g > 255 || b > 255) throw "Invalid color component" return ((r << 16) | (g << 8) | b).toString(16) } Console returns You now have your clicked Sprite! Thanks you guys for reading, hope this can help someone! Léo DESIGAUX Link to the Project Link to my Website Link to my Twitter Link to my Linkedin
  25. Which is the best way to paint the canvas with an input Fragment shader using BABYLON? Not a mesh but directly the canvas itself. I could set up an ortographic camera and a plane in front of it, but that's... just bad. Thanks in advance