Search the Community

Showing results for tags 'canvas'.

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.js
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Found 276 results

  1. 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: experiments:
  2. Hi All, I'm a JavaScript developer with goods hands on experience on game development. I need artists to develop games for IOS ,Android and web. if any one intrested do Pm me.
  3. Hello, I'm currently making little games on codepen to teach myself how to bluid them and get better at it So i thought it could be nice if I post on this topic every time i make a new game for the feedbacks I'm using javascript and render graphics on canvas, and piskel for the spritesheets. 1/ Marble labyrinth Created JANUARY 23, 2017 tilt the screen with your mouse and move the sphere to the square, beware the holes in the ground. Link: 2/ The Dungeon Created FEBRUARY 07, 2017 walk through the dungeon, each time you enter a new room your score get higher. Link: 3/ Copycat Created MARCH 30, 2017 This game is about cloned cats which you control at the same time Link: 4/ Don't touch the spikes (clone) Created MAY 05, 2017 Link :
  4. Hi, I know this should not be BabylonJS issue, just intend to aware people that Lenovo Phab 2 Pro may have canvas rendering issue. I am using chome to open the webpage, while firefox and opera had no problem displaying the 3D scene. below are screenshots of webpage with webgl content: The Sponza Demo: The Espilit Demo: The Instances Demo: And all ThreeJS projects I had viewed so far have this issue too: Lasertown: The Aviator: It looks like the major area of the canvas is covered, and leaving only a small rectangle area at the left bottom corner to be viewable, I am able to apply user input beyond the viewable rectangle area to navigate the scene(for example the Espilit demo). I had file an bug report to chrome and intend to file another one to lenovo as well.
  5. Hey guys, I'm looking for some advice on canvas scaling. We're working on a PixiJS game and want to have the canvas as big as possible based on a set aspect ratio. I've got it all working fine but when I started testing it on our benchmark devices I noticed the performance has dropped horribly. When I scale the canvas using CSS transform the performance is perfect but then the graphic quality is unacceptable. Does anyone have some advice how to get great scaling on any device (including 4k monitors) while still maintaining performance and good graphic quality? --- Good performance but bad quality scaling method const canvas: HTMLCanvasElement = document.getElementById('game-stage') as HTMLCanvasElement; const width = window.innerWidth; const height = window.innerHeight; const ratio = window.devicePixelRatio * 2; = '0 0'; = `scale(${Math.min(width / Constants.FIELD_SIZE.x, height / Constants.FIELD_SIZE.y)})`;, canvas.height); Good quality scaling but bad performance scaling method const canvas: HTMLCanvasElement = document.getElementById('game-stage') as HTMLCanvasElement; const width = window.innerWidth; const height = window.innerHeight; const ratio = window.devicePixelRatio * 2; canvas.width = width * ratio; canvas.height = height * ratio; = width + 'px'; = height + 'px'; if (height / Constants.FIELD_SIZE.y < width / Constants.FIELD_SIZE.x) { this.scene.scale.x = this.scene.scale.y = height / Constants.FIELD_SIZE.y * ratio; } else { this.scene.scale.x = this.scene.scale.y = width / Constants.FIELD_SIZE.x * ratio; }, canvas.height);
  6. This past weekend, I took a break from working on another game I'm working on called Space Pizzas (here's the forum post) to try out a couple web development technologies I hadn’t previously used: GlimmerJS and TypeScript. If you're not familiar with Glimmer, it is a component library (like React) with quite a bit more tooling (like Ember). And if you're not familiar with TypeScript, it is superset of JavaScript that adds a type system in the hopes of making big applications less fraught with peril than your typical big JavaScript app.Using the above technologies, I made a game called Croissant Hoops in the vein of Qwiboo’s Ball King. The idea of the game is to use the mouse or touch to drag an arc that will place the basketball into the hoop. I also added a slider that changes the games gravity (I mostly did this to try out the property bindings in Glimmer).The game can be played at’s a GIF of Croissant Hoops: In case anyone is interested, I put the source code on GitHub. The game is made directly on an HTML <canvas>. If I were going to go any further with this game, I'd probably use a framework like Phaser, but I think I'll probably leave the game as it is for now.
  7. 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.
  8. Hello, How do I make my canvas look the same on all devices? function PixiPlay(){ var renderer = PIXI.autoDetectRenderer(350,460,{antialias: false, transparent: false}); document.body.appendChild(renderer.view); var root = new PIXI.Container(); I saw a tutorial talking about Pixiv4. But he talks almost nothing about the canvas Can anyone teach me how to do this, in a simple way, please?
  9. I have been testing my game on mobile using the chrome remote debugging for Android. With auto/WebGL I was around 48 frames a second. With Canvas close to 59 FPS. Preceived heat was lower as well. One annoying thing is a strange flicker, most notiable on text and buttons. See Gif for example, quality is kinda low, ignore that. Any idea how this could be fixed? It doesn't happen in WebGL
  10. 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;
  11. Hello, I am creating a game with Phaser and I guess it is quite large, at least there are a lot of sprites. Using Phaser.AUTO which went to Phaser.WebGL on my desktop (i7-4770k @ 4ghz, 16gb RAM, GTX 970 4GB) I can't even maintain a 60fps (usually around 48-55fps) and there is noticeable stutter on 720p. The same is true for my 2015 Macbook Pro 15". I doubt I'd get any better results on a less powerful computer. I heard that using text with WebGL slowed it down a bunch? but that is a question for a different thread I guess. Anyway, I was searching for a way to speed up my game and came across the idea of switching from WebGL to Canvas. I did that, and on my Mac I got a solid 60fps (haven't tested on desktop yet). The only problem is that Canvas does something weird to some of my sprites (specifically ones with thin borders). I have attached two partial screenshots of my game with box sprites. As you can see, one of the box sprites is perfectly box-like, that one is running on WebGL. Once I switch over to Canvas the box sprites look like the other screenshot - lopsided. Is there a way I can fix this?
  12. So more than a year ago, I started learning javascript and had to build something using vanilla javascript. I thought it would be cool and fun to build a game and decided to build a Mario clone. But you know, only the Mario gameplay wouldn't be enough for the project. So I decided to add a level editor where you could save your levels that you can create yourself. Found the sprites and images from google, forgot the exact source . Also I had no idea "Mario Maker" already existed. Only found out after this project was completed. Anyways, this fun little project was completed a year ago, with the help from html5gamedevs of course, and i hadn't actually shown to anybody outside my circle. So here it is, do give it a look. It's not much but it's something I am very proud of. Link to the game: Link to Repo:
  13. HI, I'm trying to use screenspace2d as a button but when I add a viewport(minimap), the minimap becomes unclickable. Is there anyway I can change the z order or something similar to make the canvas clickable?
  14. I have different tiles, each in its own canvas. When I toggle the camera (simultaneous), the tile that our out of the viewport seem to go wrong. This only happens in Firefox. One odd thing that I am doing in my code - and this is part due to the bug - is I am having my my rendering stopped all the time, but whenever a ui action is done (ao the camera toggling) I do a runRenderLoop() (I do this for processor saving, since my frames don't update all the time);
  15. sprites

    Hello all, I am new here and playing with Pixi.js using latest build but learning with old tutorials and examples. My question is I am working on a Board Game: Jackpot game Problem: I want to generate 3 Random Sprite images on canvas but how to do that. I tried but it's not working, how to pass random fruit image into sprite and display it on canvas. Thanks in Advance. PIXI.loader .add("images/48.png", "images/49.png", "images/50.png", "images/52.png") .load(setup); function setup() { var randomFruits = ["images/48.png", "images/49.png", "images/50.png", "images/52.png"]; function getRandomFruit(fruits) { var num = Math.floor(Math.random() * fruits.length); if (num === 0) { num = 1; } var fruit = fruits[num]; console.log(fruit); } getRandomFruit(randomFruits); let orange = new PIXI.Sprite.fromImage(fruit); orange.scale.set(0.6); orange.x = (app.renderer.width / 2) + 230; orange.y = (app.renderer.height - container.height) / 2 + 20; app.stage.addChild(orange); }
  16. We adapted some code we found for a "pie progress" tracker found on these forums. It works great in Chrome, but on Safari (both desktop and mobile), if you try to force Phaser.CANVAS mode, the bitmap data is not drawn. Is there something we are doing wrong? Or is this a bug? Check out our fiddle below: - Canvas mode - it doesn't draw the circle (in Safari) - WebGL mode - it draws the circle everywhere We cannot use WebGL because on mobile safari it is not performant (avg 15fps vs canvas which gets 60fps)
  17. When I am fullscreen the canvas is not 100% height even though my CSS makes it that. When I resize the window the canvas height:width is always 2:1. Did I set code that makes this happen somewhere that I forgot? I searched everywhere but can't figure this one out. It seems like my code is the same as the babylon website Demo code, so I dont understand See attached images:
  18. Hi everyone... I'm making a simple HTML5/JS program I plan to integrate into an existing game I have that is supposed to load an explosion sprite from a sprite sheet I created (375px by 25px, each individual sprite is 25px by 25px, 15 sprites total) onto the HTML canvas. It is not yet animated, as I haven't been able to make it actually show up (this is my problem) I'll leave the code below, if you see what's causing the problem, please leave a reply with a suggestion on how to fix (that would be really helpful as I have been making zero progress in the past hour). Thanks in advance! If it helps, I have been using code from this tutorial here: <html> <body> <canvas id="exploder"></canvas> <script> var canvas = document.getElementById("exploder"); canvas.width = 25; canvas.height = 25; var explosionImage = new Image(); explosionImage.src = "ExplosionFinal.png"; var explosion = sprite({ context: canvas.getContext("2d"), width: 25, height: 25, image: explosionImage }); function sprite(options) { var that = {}; that.context = options.context; that.width = options.width; that.height = options.height; that.image = options.image; that.render = function() { // Draw the animation that.context.drawImage( that.image, 0, 0, that.width, that.height, 0, 0, that.width, that.height); }; return that; } explosion.render(); </script> </body> </html> And when I run this in Chrome nothing is showing up in the canvas element. As far as I can tell it isn't an error with sourcing the file as when I hover over this statement here: explosionImage.src = "ExplosionFinal.png"; my text editor shows a preview of the file, with the sprite sheet showing.
  19. 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: 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!
  20. Hi all... I'm programming a simple JS canvas game and I have a couple questions about two bugs I have noticed. I'll attach the game's code so you can play it and see visually what I am talking about. The first bug, which you will definitely notice when you start moving around (use arrow keys), is that the player (green square) seems sort of fuzzy/compressed on the side that is on the direction they are travelling. This one I have absolutely no idea as to what is causing it, but it doesn't seem to happen on the enemies. If anyone has any ideas about what's causing that or how to fix it that I would love to know. The second one happens when you shoot (use WASD keys) while moving. The rocket (blue square - my graphics are stunning) seems to make a curved triangle sort of shape (sort of hard to describe), like it is accounting for the movement of the player and when it exits the canvas it seems to be fully corrected as far as I can tell. I want it to instead shoot straight while my player continues onward in the direction they are going. If anyone can tell me what is causing these bugs and/or how to fix it that would be great! Thanks. The files: run.html game.js
  21. I build my sprites from a canvas object I created, which is bascially a circle with a radius at most 28 pixels. I built it with Canvas API. Then I use Texture.fromCanvas(canvas); Then Sprite.from(texture); However when I try to watch the sprite's width and height, I get 300 and 150. I wonder how are these two values calculated. What I need is a sprite as big as 30 x 30 at most. Why does it give me a 300 x 150 sprite? If I need to do some hitTest check I can't use the sprite's width and height directly. I have to use the radius of my canvas object.This is very inconvenient.
  22. Hello everyone, Hope you are doing good. Do you know any text effects library leveraging the canvas API? I am looking for something providing shadow/border customizations, little animations and other effects already available within the DOM. Actually FabricJS does that but I find it too much for what i want to do. Any ideas?
  23. Hello, I am new to this forum and first want to thank for a lot of helpfull posts! Maybe someone can help me with this one: I've started with (I believe created by iiceman, thanks!) and tried to use fabricjs to paint on the canvas. To allow user interaction I've send the events from the Bayblonjs canvas to the fabricjs canvas translated like this: var pickResult = scene.pick(scene.pointerX, scene.pointerY);var texcoords = pickResult.getTextureCoordinates(); if (texcoords) { var clicked_x = texcoords.x; var clicked_y = texcoords.y; var posX = (clicked_x * textureWidth) | 0; var posY = (textureWidth - clicked_y * textureHeight) | 0; var rect1 = canvas.upperCanvasEl.getBoundingClientRect(); var clientX = posX + rect1.left | 0; var clientY = posY + | 0; var evt = document.createEvent("MouseEvents"); evt.initMouseEvent(name, true, true, window, 1, screenX, screenY, clientX, clientY, event.ctrlKey, event.altKey, event.shiftKey, event.metaKey, event.button, canvas.upperCanvasEl); return evt;}I was surprised that this works. Sorry i didn't figured it out how to make a playground example with fabricjs, instead I have an example here: But my problem is that it is smooth in chrome, slow in firefox and IE, unusable in Mac Safari. Does someone have a idea how i could get better performance? The Part where the texture get updated is only called when the underlying fabricjs canvas changes: canvas.on('after:render', function () { UpdateTexture();});best regards, Lothar
  24. Hello people, I’m here to ask for assistance on PixiJs (more like a canvas related stuff) and IOS. I want to make an app than take all the available space of the webpage, kinda “Fullscreen” but not necessarily without the actions bar of the browser, What I was doing work pretty well on any browsers except in Safaris IOS browser, in landscape mode (sometime loading the page the first time in landscape work, then when changing orientation and coming back to landscape make the bugs appear). I can’t get to handle the IOS browser correctly, the canvas ignores one or both of the browser bar, causing it to appear under these bar. I just adapted quickly the Pixi’s “bunnymark” demo to show this problem. ( ). I found on the web an example working really fine on iOS landscape mode ( but can’t see an obvious differences with my simple example. It may be an HTML/CSS problem, but I can’t find it exactly. Thanks for your help and have a nice day.
  25. Hi! I'm using a drawn rectangle as a mask and I need to delete it after a tween, so I'm using onComplete and then in the callback function 'this.mask.clear()'. Seems to work fine in WebGL, but testing in some browsers using canvas it seems the mask is still there after the animation (other stuff in the function is working, just clear() not working on the mask). Is there any workaround for this? Or any other way to get rid of a mask? Any help is appreciated, thank you.