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
    • Facebook Instant Games
    • Web Gaming Platform
    • Coding and Game Design
  • Frameworks
    • Phaser 3
    • Phaser 2
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Website URL





Found 349 results

  1. Making the world a happier place through gaming.
  2. Hi, I am new to html5 canvas game dev and I am having a probably newbie problem. I am making a tile based map that is supposed to turn a 2d array into a map with walls and open space, but whenever I open the game it just doesn't show up... I don't even get errors!? Please help ( I am using chrome BTW ) // Declares global variablesvar canvas = document.createElement("canvas"); c = canvas.getContext("2d"), make = {}, maps = {}, width = 800, height = 600;// Creates the requestAnimationFrame variable(function () { var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame; window.requestAnimationFrame = requestAnimationFrame;}) ();// Modifies the canvas' propertiescanvas.width = width,canvas.height = height;// 2D arrays that make up mapsmaps = { one: [ ["w","w","w","w","w","w","w","w"], ["w","o","o","o","o","o","o","w"], ["w","o","w","w","w","w","o","w"], ["w","o","w","o","o","o","o","w"], ["w","o","w","o","w","o","o","w"], ["w","o","w","o","o","w","o","w"], ["w","o","o","o","o","o","o","w"], ["w","w","w","w","w","w","w","w"] ], two: [ ["w","w","w","w","w","w","w","w"], ["w","o","o","o","o","o","o","w"], ["w","o","o","o","o","o","o","w"], ["w","o","o","o","o","o","o","w"], ["w","o","o","o","o","o","o","w"], ["w","o","o","o","o","o","o","w"], ["w","o","o","o","o","o","o","w"], ["w","w","w","w","w","w","w","w"] ]};// Maps drawing functionsmake = { map: function ( map2d ) { var i, j, tile, tilesX = 8, tilesY = 8; for (i = 0; i < tilesX; i++) { for(j = 0; j < tilesY; j++) { if (map2d[i][j] === "w") { this.tile(i * 64, j * 64); } } } }, tile: function (x, y, TD) { switch (TD) { case "w": c.rect(x, y, 64, 64); c.fillStyle = wallColor; c.fill(); c.lineWidth = 8; c.strokeStyle = "black"; c.stroke(); break; case "o": c.rect(x, y, 64, 64); c.fillStyle = "white"; c.fill(); c.lineWidth = 8; c.strokeStyle = "white"; c.stroke(); break; } }}// Updates constantlyfunction update () { c.clearRect(0, 0, width, height);; requestAnimationFrame(update);}// Begins updating when window is readywindow.addEventListener("load", function () { update();});code can also be found here:
  3. Hi ! We are making a game with huge amount text. The UI are in HTML/CSS, and when the player need to move, it's in a canvas. At this moment, I use CSS media queries and zoom property to scale the game. It's work pretty fine on Webkit browser, but Firefox pixelise the game (and i don't know how this perform in mobile webview). I want to migrate into full canvas game, because it's easier to scale all the game and switch to differents scenes, but how do you handle the UI ? I have two questions : - I want to be able to have a hover on image menu, but do I need to redraw all the time the scene ? - How manage scrollbar for long text ? Are there a framework not collision oriented, but more on UI ?
  4. Hi! I've created a game called Bokeh, using HTML5 canvas, EaselJS and Box2dWeb. It's available at (also Kongregate, Chrome Web Store and Facebook). The game aims to be meditative and relaxing, and is based on the blurred circles of light you get in an out-of-focus photograph. I also composed the 6 music tracks included in the game (Bandcamp). I'd be very grateful for feedback, but I'd also like your opinion on a particular point: I believe I've taken a risk in developing a game that does not adhere to the typical cute cartoon aesthetic seen in many casual games. Do you think Bokeh's quieter, more cinematic aesthetic has any appeal? There are some screenshots below to give you an idea. Thank you very much in advance! Vince.
  5. Hi! I have finally finished my first game! (The gameplay is not so good, but i had no better idea) You have to swim further and catch the smaller fishes, but avoid the biggers and sharks. There are some power-ups, and upgrades too. You can try it here: Move with mousedown , arrows, or touch
  6. Twisty Turtle: Turtle easily beat the lightning quick Rabbit in their last footrace by being slow and steady. We all know that. What you didn't know is that rabbit said: "OK Turtle, if you're so good at going slow and steady then you're going to need all you can muster for this course". And with that Turtleaccepted the challenge from his arch-nemesis Rabbit to get through this hairy-scary, twisty-turny course. ;-) Link to game : Thank you in advance if you give feedback
  7. Hello everyone, I have a problem about a list scrolling issue and attached an SS. The problem is, I have some elements just like you see at the SS. Menu 1 and menu 2 is static but the content part must be scrollable. The content part is dynamic so it can grow in numbers. With the state of the current project they are scrollable but the content part is sliding through the back of the menu part. I just want a nice scrollable part so the content will be hidden of masked when getting throughout the menus or the header part. Thanks in advance.
  8. Hello, yes I'm new here I hope, even though this has as much to do with CocoonJS than with Phaser, that the question is still welcome and that somewhat have been in the same situation. I am a few weeks into a project and decided to test it on my Android Device (Samsung Galaxy S3 - mini). To my surprise the game only ran at about 3 FPS. It is a somewhat graphic-intensive game, but still. After fiddling around in the settings for a while I tried to disable WebGL and rely on pure canvas/software rendering. This made the FPS jump to about 25, which is somewhat acceptable, but from the tests I've heard, if the game can run in 25 FPS in canvas-mode, it should be able to run at about the double in WebGL-mode, so there is clearly something wrong. When running in WebGL-mode, in addition the terrible FPS, there seems to be some graphical artefacts as well. I have worked in OpenGL before, and know that even a single error can destroy performance for the entire game, so it points toward some error in the OpenGL-ES. Problem is that the debugger in CocoonJS doesn't report any Errors, and the few Warnings has nothing to do with graphics, only inputs. Is there some known bug with Phaser or Pixi.js, because my next step would be to to disable parts of my game to see if that is what causes the problem, which is going to be a very tedious process. The features that I am using that might be a cause of problem: - Crop() there were something about it in this thread, but it seems outdated, i might be wrong though - 2048x2048 texture-size (All modern devices should support this) - Tint() though very sparingly - I am using Phaser 2.0.4 - I am using CocoonJS Launch App 2.0.1 for Android I really hope someone can help out with a solution or a way to help the debug-process of this problem.
  9. Hi, first post! Been trying to figure this one out for ages. I'm trying to find out if anyone knows of any drawbacks or issues when using CSS transforms on a canvas or an element that has a canvas as a child, specifically applying a CSS scale transform. I have a combination of canvas and DOM images and I'm having some serious issues with flickering and partially drawn images when running in Chrome on the Galaxy S3 and Note 2 . I've looked into the possibility that -webkit-perspective or -webkit-transform-style: preserve-3d might be the cause but add/removing them hasn't made any real difference and I'm only using a 2D transform. Any help with this would be greatly appreciated! Many thanks.
  10. hi, as "detect" the collision of a sprite with the edges of my canvas ?
  11. So, I've written a simple animation with three.js using the canvas renderer. It works just as expected on the desktop, but it leaves an afterimage of the first frame when compiled for android on cordova. Download this video I recorded with SCR Screen Recorder to see exactly what I'm talking about. Here's the following markup and script for the said animation (which, again, works fine on the desktop, but leaves an afterimage on android). Of course, you'll also need to download three.min.js in the same directory if you want to run it. <!DOCTYPE html><html><head> <title>Cube</title> <style type="text/css">* { margin: 0; padding: 0; } canvas { width: 100%; height: 100% }</style></head><body> <script type="application/javascript" src="three.min.js"></script> <script type="application/javascript"> var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); var renderer = new THREE.CanvasRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); // create geometry var geometry = new THREE.CubeGeometry(1,1,1); var material = new THREE.MeshLambertMaterial( { color: 0x00ff00, overdraw: true } ); var cube = new THREE.Mesh( geometry, material ); // create lights var light = new THREE.AmbientLight( 0x004400 ); // soft green var directionalLight = new THREE.DirectionalLight(0xffffff); directionalLight.position.set(1, 1, 1).normalize(); // camera orientation camera.position.z = 5; camera.position.y = 2; camera.lookAt( scene.position ); // draw objects scene.add( cube ); scene.add( light ); scene.add( directionalLight ); function render() { requestAnimationFrame(render); cube.rotation.y += 0.1; if (cube.position.z <= -5) {cube.position.z = 0;} else {cube.position.z -= 0.1;} renderer.render(scene, camera); } render(); </script></body></html>
  12. Hi everybody and welcome to my first topic in this forum ! Firstly, a lot of thanks for babylon's js developpers. Secondly, I'm a french newbie in developpment, 3D and in english language, so please, use not too much complicated words . My question is... is there a solution to know 2D position of a 3D mesh rendered on the canvas ? My aim is to render a sprite on the screen which represent a circle of selection around the mesh after picked it. Maybe a better solution than sprites already exists and i'm open to suggestions. In advance, thank you for your replies .
  13. newbie here. was wondering if it is possible to make the game.stage.background alpha so that the player can see through the phaser canvas to the background colour of the browser window? i.e. you can still see the buttons, and actors but the background of the game is transparent. I'm using leap.js to change the background colour of the browser window everytime the player gestures. thanks! - JW
  14. Hello fellow HTML5 devs! I'd like to present you my first canvas game. It is a fantasy Action-Adventure called 'Ridane'. The project is still work in progress and in a very eary development state, but I think it's never to early to gather some feedback. Currently there is only one level available but it is filled with zombies only waiting to get beaten up . I know that the gameplay isn't that exciting by now, but I want to finish the first level, do some polishing and get rid of any remaining bugs before I continue with the next level and more features. In the following levels the player will be able to choose between a melee, ranged or magic equipment and they will also get some active skills depending on their class choice. I will also work on a 'block' feature for melee fighters, an 'aim' feature for ranged fighters and some kind of 'focus/channel mana' feature for mages. Thus the gameplay will be more diverse and the three classes will differ a little more. Preview of some unit graphics: I'm looking forward to your feedback and I very much appreciate every suggestion, found bug or criticism . But enough talking, you try out the game here. Don't forget to turn on the ingame sound! You can also take a look at the code on GitHub. One additional note: Unfortunately the game does not support mobile devices. The features I have planned and the therefore needed controls are not possible on mobile. I'll be supported by a frontend colleague very soon (I'm also a frontend dev), so the game should make some good progress in the next weeks and I will update you guys if there is interest for that. Cheers! Nico
  15. So I finished a game that originated at a Jam with the topic "Russian Invasion". You can play it here: . A tiny screenshot: With that I have a little question, I tried to position the game inside my page as you can see, but I had trouble that PandaJS takes the canvas it is put in and places it to it's own preferred coordinates. I achieved the above effect by explicitly removing the absolute positioning from the engine source, but that's quite a hack. Basically what I need is for panda to position the canvas w.r.t. its parent (e.g. a <div>) instead of the whole window. Any suggestions?
  16. Hello everyone, I am currently challenging myself to make a game(at least a playable prototype) within 40 hours. I managed to come to this (rough and probably buggy) demo, but there's room left for improvement. All the files are enclosed in the .zip archive attached to this post. So please, take 2 or 3 minutes to check it out, and tell me what you think of it. All remarks are welcomed. Thanks
  17. Hello, I have started developing with canvas and JS this week and have a few questions on the structure of a program..... When is it appropriate to create a new file that declares an object? so far I have been declaring my objects using the object literal method in a single file but its coming close to 300 lines and I am now wondering if I should start making new files for my objects. for example, I want to make a gun class which acts as a parent class for all gun types. I have made a new JS file and have added this: function Gun(){ this.x=0; this.y=0; this.image1=9; this.image2=10; this.width=36; this.height=32; this.pickedUp=false;}now, would it be more efficient to declare this using object literal in the other file? Or should I continue writing this one and make a loop function in this file that handles all the actions that I would normally put in the other (300 line) file?
  18. Howdy HTML5 game makers! Really proud to show you guys our latest game All At Breakfast! It’s a time (mis!)management game – but certainly not your grandma’s time management game. We did it fully Goodboy style, so it’s action all the way as you keep a room full of increasingly frantic punters happy. You play as one of the three cheeky characters from the CBBC TV show All at Sea and get to run around serving customers in a sea front B&B. Add some crazy speed and a bunch of power up hats (Yes, hats… Of course!?) and you have a pretty great mix! And what game is complete without a Victorian mode and a disco helmet? We dug deep into our back-pocket of HTML5 tricks to really try to make the game run on every device but also feel native. So you can expect to see a healthy does of webGL, a sprinkle of CSS filters and even a little webaudio trick or two! Built using pixi.js it really is quite the treat on mobile and tablets! We would love to know what you think! Hope you enjoy! GO PLAY
  19. I've just started with phaser, and I'm wondering how I should center the canvas on the screen. I see that phaser can manage scaling, so I wonder if it could do the centering, or if I should mess with CSS myself, and how exactly.
  20. Star Defender: Quite a while prior in a cosmic system far faraway… … in the planet blu comet ,star striker,the legend of the planet was determined to explore the planet earth and to spare earth from the savage… … dark openings! Anyway he was to late !the dark gaps were at that point agreeing the whole state!star striker needed to do some thing!or else the earth is going to transform into dust!so… .star striker arranged his electric blaster and the dark openings got prepared their electric shape balls Link to game : Thank you in advance if you give feedback
  21. Greetings, developers! I have the following situation here: I'm not using any of Phaser tools to manage game stretch logics and I have a problem with Phaser buttons right now. Guess that Phaser don't know that touch coordinates are related to old canvas style while it was stretched. The resizing logic is following: function ResizeGame(){ var Ratio = 960 / 640; var NewWidth = window.innerWidth; var NewHeight = window.innerHeight; if (NewWidth > NewHeight) // LANDSCAPE { = NewHeight + "px"; = NewHeight + "px"; NewWidth = NewHeight * Ratio; = NewWidth + "px"; = NewWidth + "px"; //GameInstance.scale.width = (960 / (NewHeight * Ratio)); //GameInstance.scale.height = (960 / (NewHeight * Ratio)); } else //PORTRAIT { NewHeight = NewWidth / Ratio; = NewHeight + "px"; = NewHeight + "px"; = NewWidth + "px"; = NewWidth + "px"; //layer.scale = 960 / NewWidth; } = window.innerWidth * 0.5 - NewWidth * 0.5 + "px"; = window.innerHeight * 0.5 - NewHeight * 0.5 + "px";}The button boundaries are offset. I don't know what to do. Changing camera view boundaries not works. Changing world boundaries also has no effect. Tried using Phaser to do that stuff but not found the way how to do it. The next question is about locking mobile swipes and touches to prevent scrolling of the page while playing. The stretched game has some parts of document body visible. And when player's finger touches that region the browser scrolls content so url bar appears.. Its awful. Tried doing that: /* Locking mobile browser non-gaming manipulations */document.body.addEventListener("touchmove", function(e){ e.preventDefault(); return false;});document.body.addEventListener("touchstart", function(e){ e.preventDefault(); return false;});document.body.addEventListener("selectstart", function(e){ e.preventDefault(); return false;});document.body.addEventListener("dragstart", function(e){ e.preventDefault(); return false;});document.body.addEventListener("contextmenu", function(e){ e.preventDefault(); return false;});But it doesn't work.
  22. That was giving me a hard time and some crashes, that where caused by full memory on mobile devices. I am creating a lot of canvas textures and found out, that the cache fills up and grows into infinity. Pixi sets a _pixiId for every new canvas, which is then used as a key for the cache. I did not find out how to delete it. Maybe I am missing something in the API, or do not understand what´s going on. So I wrote this little patch, that could help also others: PIXI.BaseTexture._fromCanvas = PIXI.BaseTexture.fromCanvas; PIXI.BaseTexture.fromCanvas = function (canvas, scaleMode) { if (canvas._usePixiCache) return PIXI.BaseTexture._fromCanvas(canvas, scaleMode); else return new PIXI.BaseTexture(canvas, scaleMode);}; For canvas objects that are about to be reused one can set canvas._usePixiCache=trueFor some reason this has to be done.If there is a better solution, any advise would be fine!
  23. I'mworking on a new game, Bit Wars. It's a strategic game where player move terrain instead of units. The core mechanics are tree units like paper-stone-scissors and a tree terrain types. Sprite test: Test latest version: latest alpha builds at: Source code:
  24. Hey guys Just released a blog post with the details on the new spine support for pixi.js: Thats one more feature crossed of the list Heres some working examples: Big thanks to enpu for the initial build!
  25. am losing my mind somewhat on this issue. Have got the core of a physics bike game running, standard trials type gameplay. It runs great @30FPS or so on nearly all devices, however, on my Samsung S4 in stock browser it chugs along at a around 10FPS (where as it runs perfectly at full speed on my old S2!??) The whole game is rendered in a canvas which is 640x426. Anyone got any thoughts? thanks Chris