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. Link : Hi everyone! I'm here to introduce my very first game, named "Saving Private Redsquare". The game: You control Redsquare, and must avoid ennemies on your way to destroy the Mad Rectangle King. There are 42 levels, among them 4 bosses. The rest of the levels are based on dodging waves of ennemies. Canvas is changing a little among the levels. The development: I have been working for almost a year, coding from time to time. To be honest, I did not plan the game at all: I wanted to learn how to use canvas and how to build games. This means that the game was made step by step, adding new way for me to play with the canvas. This is why it may be repetitive and poorly structured, but I really enjoyed doing it and I tried to make it entertaining and challenging. All development was made with native Javascript and just a bit of Jquery. All graphics are made with canvas drawing, there are no image at all. Musics were made using Soundbox. All the code is available here if you are curious. If you have any feedback, issues, advices ; just let me know! Thank you all!
  2. Hello, this is my first game post here I think. I made a little game for js13k, though due to unforseen accident I got injured and got discharged from hospital today so I missed the deadline horribly xD. Well the game is working fine so I'll at least present it here for you guys :-). There are a few bugs which occur sometimes but the game mechanics itself are intact and work perfectly fine (ehm perfectlye ... kinda hopefuly perfectly fine), there are no sounds and not many animations, I will be upgrading the game with time after I get better. Theme was: Reversed. Total size (zip): 10kB (out of 13 possible kB). It's endless scroller action game, get the highest score possible and post it here! I got up to 35950 so far but I'm going to get more hopefuly. Link to the game is here. I tested the game in latest chrome and firefox and everything worked fine (firefox is way faster for me but it's the same with any other game so I guess it's just the browser thing in my case?). Game has some basic resize mechanism so it should fit to different screen sizes, unfortunately playable only on computer (I haven't implemented any other controls but keyboard - I'll give it more polishing and refactor the whole thing after I get better). The game has progressive elements, the longer you can manage to survive the better, difficulty increases as well as your ship's getting stronger. Link to the game is here. Some screenshots: I'd love to hear your opinions so please don't hesitate to bash me! :-) Best regards, AzraelTycka. EDIT: corrected few bugs and polished the game mechanics to make it more entertaining.
  3. Heya all! It's been a while since my last post here, but here it goes... Let me present you my entry for this year's js13kGames competition - Captain Reverso: The missing truckers Link to the entry: Plot You're a truck driver named Bob, who wakes up one day with a huge hangover, realizing that for some mysterious reason all other truckers disappeared... That's how Captain Reverso is born! This year's competition theme was Reversed and flawless reversing is Captain Reverso's super power! Your quest is to park all the trailers on time and safe the world from complete chaos. Controls wasd / arrows - drive / menu navigationspace / enter - attach/detach trailer / menu clickescape - pause gameNotes Use Chrome or Safari for the best user experience. The game also runs Firefox (crap performance) and IE11 (no sound). Screenshots The final build size is 13.311 bytes. The game itself is quite difficult at the beginning so take your time in the tutorial level to practice. I'm planning to write a longer post-mortem after the results so stay tuned! Hope you enjoy that
  4. I am happy to present a js13k reversed version of my latest&first android game - Squared Lines js13k reversed. It was written in canvas with no libs/engines in 2 days. I do not know how does it work, but I think it is quite enjoyable, especially after level 25. I had no time to add animations/sound. Game/Github/Twitter links: Original version has been written in HTML5/Angular JS/DOM/CSS and uses cordova/crosswalk. I think I might write a larger post about it, as the configuration was quite mad. Its webpage is:
  5. Hi guys, How I can find the third point? It is simple, but can not find the solution. Regards, Nicholls
  6. London's Candidates ONLY! Compatitive salary. (submit your resume with your current and desire salary range) High 5 Games is looking for an accomplished, experienced, and creative senior level HTML5 Game Developer to join our team in London, UK. RESPONSIBILITIES: You will be our HTML5/CSS/JS ninja with your key responsibility being to lead our HTML5 development, both for new games specifically designed for HTML5, as well as converting our existing games into HTML5. You will make key determinations as to how to balance our heavy art assets with the limitations of the technology, and will own anything front end related, affording you the capability to impact all aspects of your projects. Development is a passion, not just a job. You like to try out new things and are willing to pass your knowledge to others. You have a wide knowledge of front-end development and in-depth experience in web development, and have the ability to lead a team. REQUIREMENTS: HTML5 (Canvas) JavaScript developer (ES5 native) with Phaser experience to build/convert high quality slot games from Flash to HTML5 for mobile/tablet. Ability to write OO code, organize that code efficiently and document it.Knowledge of CSS through Canvas, animation, jQuery and other JS frameworks.Knowledge of usability, user experience (UX) design, modern web standards and SEO best practicesSolid experience in cross-browser development and testing, including mobile, while maintaining a consistent experienceAbility to not only take initiatives and work independently but also communicate and be collaborativeAgile approach to problem solving and passion for technical challenges PREFERENCES: Experience with Build tools (grunt), Browserify, Jira, TDD, NodeExperience with CSS preprocessors such as SASS, LESS, etcUnity 3D knowledgePhotoshop skillsServer side scripting language experience (PHP) TO APPLY AND QUALIFY: Submit your resume with link to github with examples of JavaScript projects for us to review. Direct contact: Marina Chechelnitskiy, Manager of Talent Acquisiton at H5G Email:
  7. Hi people. I've been doing a game for a year or so. Now i'm facing some troubles with the performance. I know i can use cocoonjs but before talking about that, i want to ask you if this are myths or realities , if you have faced it: Aclaration: Performance was not measured, it was what I saw with the lag of the game. This was tested with chrome 35. Using different canvas layers.I've been doing all in the same canvas element, i tried one time to add more canvas layers but I didn't noticed any change. Have you tried this? How is your experience with that? Rendering in a virtual canvas, and then painting on the visible canvas.This is one of the last changes i did, now i'm painting all in a hidden canvas created at runtime, and then drawing It on the visible canvas after drawing all the individual entities on the virtual one. I have noticed no change of performance. Not drawing too much entitiesThis made the game work better. As expected. What other tips could you provide to improve the performance? I'm using map/ functional style of programming for updating the entities, may this lead into a black hole of performance? function updateEnemies(){ enemies = _.compact( .map(move) .map(removeIfOutOfScreen));}I know "for" loops are better performants, but i don't know if this is what hits the performance of the game. Other thing I'm not doing is using a QuadTree algorithm for checking near positions. How do you check that? Any algorithm? Brute force? This is the game I'm doing. I'm opensourcing everything but before I have to clean all the f**ing mess of code I did in one year. (I think i have at least 6 more months to work on cleaning and performance) I accept all the suggestion and ideas you have for performance, or whatever you want to say! Thank you bros!
  8. Jonu

    2 Renderer

    Hey, in my current Projekt i need two canvas. One for displaying a mountinggraph and the other one for displaying a dynamic diagramm. Can i use two canvas doms and two renderer of pixi or do they interfere with each other ? Thanks in advance Grettings Jonu
  9. I'm trying to incorporate a pixi.js game into a qt quick gui application. Is there a way to use pixi.js with the qml canvas type?
  10. Hello everyone, I am new here in phaser and javascript. I come from openfl (if you don't know what that is then take a look at and have fun). I am on a jigsaw puzzle game quest. but for all quests there are always issues; and I have two issues for which I cannot find an answer even with this artefact called google. my first issue is: I have successfully made my first phaser game ( this jigsaw puzzle ) work on mozilla Firefox and Google. but on Internet explorer, it doesn't work at all! and my second is: I need to resize the images that the game will use. the images will have many different sizes, sometimes bigger and sometimes smaller than the desired image size, Nevertheless those images need to be resized to the desired size. ok, first hear me out: I have made some researches about how to make a jigsaw puzzle here. and I find out some nice tips: var bitmap = game.make.bitmap(); var graphics = bitmap.context; //then drawing the jigsaw piece to your heart content graphics.moveTo(0,0); graphics.UNTILYOURJIGSAWISDONE(); // //then comes the best part, clipping the image to be drawn graphics.clip(); //finally having our image graphics.drawImage(img,x,y); this is what I have found out to be working. Thus I created a class making pieces, jigsaw pieces and have a puzzle working fine on Firefox and Google chrome. for my resizing problem, the main problem is that img cannot be a Phaser.Sprite nor a Phaser.Image for more infos check I thought about some possible answers for the resizing problem. the answer lies in resizing the image in pure javascript. without showing it. but for Internet Explorer one: I have no idea Any help will be great
  11. Hi, new to the forums I've got an issue drawing images on the canvas on Firefox and IE. I created an array of Sprites (Floor Tiles), iterated through them and placed them right next to each other. When I translate the canvas (platformer style), everything draws perfectly EXCEPT on Firefox and IE. Both browsers seem to draw each sprite with a 1 pixel gap between them, but only when I'm calling ctx.translate(). The other browsers draw my floor tiles appropriately. Wondering if anybody ran into a similar issue. I'm running the latest version of each browser, and rounding sprite position coordinates when calling drawImage(). Again, this pixel gap issue only happens on Firefox and Internet Explorer. Thanks! Chrome / Opera / Chrome Mobile / Opera Mobile / Safari Mobile (During ctx.translate) Firefox / Internet Explorer (During ctx.translate)
  12. My game UI had three icons, each with one with a text. So in code I was adding them in what I thought was a logical way: "level" icon and text, "score" icon and text and "deaths" icon and text. This resulted in phaser using a separate draw call for each one. It's not that important on desktop but on mobile every performance gain counts. The fix was to simply arrange the code so that all the icons are added one after the other and then all the texts are added one after the other. Now there's only one draw call for all the icons and one for all the texts. This might be pretty obvious for experienced programmers but I'm sure there must be some other junior devs making the same mistake I made.
  13. Hi! I want to clear the whole canvas. I know there is one way by changing state, but I want to be in same state and clear whole canvas when a sprite is clicked. Something like:, this);
  14. Hi! I am new here and to pixi.js and game development in general and I wanted to know if it is it possible to subtract a graphics shape from another shape using pixi.js? I know it is possible using canvas' "globalCompositeOperation" with "destination-out" or "source-out" like is demonstrated here: but I wanted to know if it is supported by webgl as well and if there's an already built method in pixi.js for it. if such a method does not exist yet, what would be the best way to implement it? thank you for your time.
  15. Hey Guys, I am trying to print the Camera Input to a Canvas Element in HTML5. On the desktop it works fine, but building it for Android devices with cordova, I cannot access the camera and I really don't know what I do wrong. I also tried it with Crosswalk, there I get no error, but the Camera isn't shown either. Here is my Code: navigator.getUserMedia = (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia); navigator.getUserMedia(options, onSuccess, onFail);var options = { audio: false, video: { mandatory: { maxWidth: window.innerWidth, maxHeight: window.innerHeight }, optional: [{ facingMode: "user" }] }}var onFail = function(e) { alert('Failed to get camera');};var onSuccess = function(stream) { var video = document.getElementById('my-webcam'); if(navigator.mozGetUserMedia) { video.mozSrcObject = stream; console.log("videoWidth" + video.width); } else { var url = window.URL || window.webkitURL; video.src = url.createObjectURL(stream); } // Wait 1000 ms before starting the loop otherwise the videosize aren´t set, so the Canvas can´t get values from the video setTimeout(function(){ setInterval(updateCanvas,30); //manipulating the canvas here // Make sure the canvas is the same size as the video var video = document.getElementById('my-webcam'); //invisible var canvas = document.getElementById('my-canvas'); //where the camera input should be shown canvas.width = video.videoWidth; canvas.height = video.videoHeight; //- $('#mainPage_ButtonPhoto').height(); },1000);}; But if I build this, I always get the onfail alert "Failed to get camera". I figured out it is a "errorPermissionDeniedError". I build it with xdk. But with this android.json, or app manifest for building android it is still not working. { "prepare_queue": { "installed": [], "uninstalled": [] }, "config_munge": { "files": {} }, "installed_plugins": {}, "dependent_plugins": {}, "permissions": { "audio-capture": { "description": "Required to capture audio using getUserMedia()", access: "readwrite" }, "video-capture": { "description": "Required to capture video using getUserMedia()", access: "readwrite" } }}Kind regards, SirSandmann
  16. AbdSab

    Javascript canvas tuto

    Hi all, i just want to share with a serie of tutorials to make an Html5 without any framework, just using the canvas, So without talking alot here is the part 1: If you liked the style of this video you can find the other parts in the channel: And thank's for watching
  17. So I am having a bit of a performance issue with states. When restarting a state multiple times the game starts to show a noticeable slowdown which also slows down Chrome. This occurs with WebGL and Canvas. For a bit of context here, I am messing around with a tile based RPG style game and I have created a method of choosing which map to display by passing a bunch of params (such as the map, tileset, tilemap layers etc) to the state start and restart commands. I had also planned on using states for various other tasks such as a battle system. This init function for the state is here: (Though I'm not sure if it will help very much) And is usually called with something like "this.state.restart("Gameplay", null, null, "mapname", {"Tiled tileset name" : "Phaser tileset key"}, "tile layer", "collisions layer", "objects");" as an example. As I mentioned before, constant restarting causes major performance issues. So what I'm wondering is, is this an issue with how the state system works (or possibly even tilesets)? Should I find a better method of displaying maps instead of using states multiple times? Thanks.
  18. Hi guys, I'm trying to save a Phaser.BitmapData object to the localstorage as part of a small painting app demo i am carrying out. I know it's possible to convert the entire game.canvas to a data URL via: game.canvas.toDataURL();and save this string to localstorage, but is anything similar available for saving individual objects of BitmapData? - I've tried investigating the various properties of BitmapData, (imageData looked the most promising) to no avail, but I think (hope!) I'm just missing something fairly obvious. Many thanks! Cameron
  19. Hello, I'm wrapping up a realtime multi-user drawing app using elements from an example joshcamas posted recently. I'm not including the GUI and much of the server calls in my example below, so running this script wil provide errors, but the whole script is 3x as large. However, if someone might help me to accomplish 2 things, I would be grateful. 1. Draw on a plane using a dynamic texture. 2. The base color of the plane is a color3 white (or other.) Here's the example: Thanks, DB
  20. I am having issues getting the click events to fire for a basic Phaser.Button when running in canvas+ with cocoonJS. I am testing the app (using phaser v2.2.2) with the cocoonJS launcher (using cocoonJS v2.1.1.1) on iOS 8.1.2 on an iPhone 6. Here is what I have on a basic menu game state: var button = - 100, 215, 'assets', null, this, 'button_play_02.png', 'button_play_01.png', 'button_play_02.png', 'button_play_01.png');button.inputEnabled = true;button.fixedToCamera = true;button.smoothed = false; { console.log('button event onInputOut');}, this); { console.log('button event onInputDown');}, this);The button image displays in canvas+ but does not fire anything when clicked/touched. In webview+ and webview it works fine. The 'assets' is a texture atlas with the images being displayed for the buttons based on transparent pngs. I have seen similar issue on other topics (see below) but found no solution that worked. Any help would be greatly appreciated. Related topics:
  21. Hey guys, To boost a performance on mobile devices with Full HD screen resolution I'm doing the following thing: 1. Set canvas size like half of full screen 2. Scale the canvas with CSS As a result, the GPU has to do less work, and the scene runs smoothly. Here is the example css: #canvas { position: absolute; width: 40%; height: 40%; -webkit-transform: scale3d(2.5, 2.5, 1.0); transform: scale3d(2.5, 2.5, 1.0); -webkit-transform-origin: 0 0 0; transform-origin: 0 0 0; top: 0; margin-bottom: 70px; touch-action: none; -ms-touch-action: none; z-index: 0;}Well, this approach worked until I started dealing with picking collisions. The picking mechanism doesn't take in account the scaling. Therefore the pick result is completely wrong. If you run this code without scaling it would work as expected (if you pick sphere, it would write in the console "sphere1"): var createScene = function () { // This creates a basic Babylon Scene object (non-mesh) var scene = new BABYLON.Scene(engine); // Our built-in 'sphere' shape. Params: name, subdivs, size, scene var sphere = BABYLON.Mesh.CreateSphere("sphere1", 16, 3, scene, false); sphere.rotationQuaternion = BABYLON.Quaternion.RotationYawPitchRoll(Math.PI / 2, -Math.PI/2, 0); var camera = new BABYLON.FreeCamera("camera", new BABYLON.Vector3(0, 50, -10), scene); var light = new BABYLON.DirectionalLight("dir1", new BABYLON.Vector3(0, -1, 0), scene); light.position = new BABYLON.Vector3(0, 30, 0); sphere.position = new BABYLON.Vector3(0,1.5,0); = sphere.position; camera.setTarget(sphere.position); camera.attachControl(canvas, true); scene.onPointerDown = function (evt, pickResult) { console.log("Picked " + + " in x:" + pickResult.pickedPoint.x + " y:" + pickResult.pickedPoint.y + " z:" + pickResult.pickedPoint.z); } return scene;};But if you run it with the above css, it wouldn't work, i.e. picking sphere would give you a null result. Anyone has any idea how to deal with this?
  22. I'm very new to Babylon.js and have spent a few days reading through the docs and forums, but I haven't been able to find a good answer for this. Let's say I have a rotating and scaled cube in my scene and I want to get the absolute position of each vertex. I found this topic for translating world coords to screen coords: but so far I can only figure out how to get the position of the mesh itself, not for its vertices. In fact, even after digging around in the mesh object, I can't even find where the vertices are stored. How do I get the coordinates of a mesh's vertices so that I can translate them to screen coords so I can draw debug lines on a canvas?
  23. Hi there I'm new to this forum and fairly new to gaming, especially mobile gaming. I would like to start developing simple games using Canvas and javascript. The greatest challenge I can see so far and creating a full-screen (or close to fullscreen) experience across different devices. To be honest, I would be happy if I could even guarantee my games would work on all iphones alone. I guess my question is, is there a template or framework that exists that would act as a starting point and at least have most popular devices appearing in fullscreen? I started a game using this tutorial. It's a great tutorial an I learned a lot but it doesn't really address handling different aspect ratios. Any input would be helpful! Thanks
  24. hello, I'm new in building an html5's game. I try to learn this manually first by describing html, then describing my own javascript, etc. i wanna ask something that i can't find the tutor in google because there was a tutor by using a html5's game framework mostly. How can i input .gif image extention into canvas manually? Thanks for your answer
  25. Hey, I was wondering if it's possible to use either CSS, Canvas, HTML or JavaScript to draw elements for a game (like blocks, characters, etc..) or would I have to use a pre-made image. If this has already been answered, please direct me to the proper thread/website. I'm self-taught so a lot of examples and "dumbing down" is greatly appreciated! Thanks again in advance.