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
    • 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 345 results

  1. Hi guys, How I can find the third point? It is simple, but can not find the solution. Regards, Nicholls
  2. 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:
  3. 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!
  4. 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
  5. 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?
  6. 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
  7. 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)
  8. 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.
  9. 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);
  10. 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.
  11. 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
  12. 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
  13. 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.
  14. 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
  15. 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
  16. 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:
  17. 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?
  18. 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?
  19. 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
  20. 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
  21. 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.
  22. I made a little demo called pixi-bouncing-box. You can see the demo here. So initially there are 10 bouncing boxes. When button add 10 boxes is clicked, another 10 boxes are added to stage. The animation run smoothly at 60fps, even after 90 boxes added. But after awhile, the fps gradually decreased from 60 to 50 then down until 20fps with 90 boxes added to stage. I saw the PIXI v3 100k bunnies benchmark and it claimed it got 40fps. Did I make some mistakes? The code I made is available at Github, but I'll also post it here in case you need a quick scan. ;(function ( window, document, undefined ) { 'use strict'; var WIN_WIDTH = window.innerWidth; var WIN_HEIGHT = window.innerHeight; var btnAdd = document.querySelector('#add'); var renderer = new PIXI.CanvasRenderer(WIN_WIDTH, WIN_HEIGHT, { transparent: false, autoResize: true }); renderer.backgroundColor = 0xF5866B; document.body.appendChild( renderer.view ); var stage = new PIXI.Container(); var speed = 10; var box_w = 70; var box_h = 70; var boxes = []; addTenBoxes(); btnAdd.addEventListener('click', addTenBoxes, false); var boxEdgeRight = WIN_WIDTH - box_w; var boxEdgeBottom = WIN_HEIGHT - box_h; requestAnimationFrame(animate); function animate() { for (var i = boxes.length - 1; i >= 0; i--) { var curr = boxes[i]; if ( curr.isGoingRight ) { curr.position.x += speed; } else { curr.position.x -= speed; } if ( curr.isGoingDown ) { curr.position.y += speed; } else { curr.position.y -= speed; } if ( curr.position.y < 0 ) { curr.isGoingDown = true; changeBoxColor( curr ); } if ( curr.position.x < 0 ) { curr.isGoingRight = true; changeBoxColor( curr ); } if ( curr.position.y > boxEdgeBottom ) { curr.isGoingDown = false; changeBoxColor( curr ); } if ( curr.position.x > boxEdgeRight ) { curr.isGoingRight = false; changeBoxColor( curr ); } } renderer.render(stage); requestAnimationFrame(animate); } function addTenBoxes() { for (var i = 10 - 1; i >= 0; i--) { var box = new PIXI.Graphics(); box.beginFill(getRandomColor()); box.drawRect(0,0,box_w,box_h); box.isGoingRight = true; box.isGoingDown = true; box.position.x = getRandomXPos(); box.position.y = getRandomYPos(); box.endFill(); stage.addChild(box); boxes.push(box); } } function changeBoxColor( _box ) { _box.beginFill( randomColor().replace('#', '0x') ); _box.drawRect(0,0,box_w,box_h); _box.endFill(); } function getRandomXPos() { return Math.random() * WIN_WIDTH - box_w; } function getRandomYPos() { return Math.random() * WIN_HEIGHT - box_h; } function getRandomColor() { return randomColor().replace('#', '0x'); }})( window, document );Does this have something to do with CanvasRenderer? Because when I switch to WebGLRenderer, the animation run smoothly at 60fps even after 3-5 minutes. I am aware that WebGLRenderer is faster than CanvasRenderer but not all device support it, that's why I used CanvasRenderer. This demo is tested in the latest Chrome on Yosemite.
  23. HI guys, i need your help to achive the design mentioned in the attached image.. It is related to environment map which assumed to be created dynamically, when user clicks on those rectangle it will open the respective server detauils.. Is this possible with canvas, if so how it can be achieved?
  24. I've been working on a simple canvas game and have run into a problem :/ Here it is --- Here's a link to the code on github It uses the metronome example from this Web Audio tutorial Everything works fine on my macbook pro when run on my local server, however when I uploaded it live to the web it sometimes starts struggling after about 10 minutes of running the audio starts to crackle and eventually stop. I tested it on some slower laptops and it struggled a lot more - took a couple of minutes before the audio crackled / cut out and and started to lag. This makes me pretty sure it's a memory leak causing this. I did some profiling and fixed the way the entity images were handled, used a resource loading class instead of using new Image() each time. This fixed the dom node problem on the timeline : Before After But the problem still occurs, the memory usage still slowly creeps up. The memory snapshots show some image elements in the detached dom tree in red : heap snapshot - Does this mean the entity images are somehow not getting removed properly or are being duplicated still? - Or could the problem be my removal of entities using Array.splice[index] ? I've read this can cause problems but thought my game was too small / simple for this to be the case? Here is the relevant code for dealing with entities (they are spawned by pushing them onto the monsters[] array) // in the monster's update function if (this.isDead === true) { if (barNumber % this.barTiming === 0) if (current16thNote % this.timing === 0) { // Waits until it's queue to disappear and play it's sound score += this.points; this.toRemove = true; // sets to remove to true, read this could solve some problems // playSoundDelay(samplebb[this.sound],; } } // monster's render function, (thought this could be something to do with it if the image elements are the problem) render: function (ctx) { if (this.isDead === false) { ctx.drawImage(resources.get(this.monsterImage), this.x, this.y, this.sizex, this.sizey); } else if (this.isDead === true) { // if monster is dead, make it translucent; ctx.globalAlpha = 0.4; ctx.drawImage(resources.get(this.monsterImage), this.x, this.y, this.sizex, this.sizey); // resources.js is an asset loading library ctx.restore(); } } // One type of entity var Shark = function (position) { this.x = position.x; this.y = position.y; this.sizex = 64; ..... ..... this.speed = Math.random() * (120 - 50) + 50; this.monsterImage = "images/Shark.png"; // the url to be passed into the resource.get call }; Shark.prototype = Object.create(MonsterMove2.prototype); function updateEntities(dt) { for (var x=0; x < monsters.length; x++) { var monster = monsters[x]; monster.update(); if (typeof monster.move === 'function') { if (!monster.isDead) { // If entity is alive, chase the player monster.move(dt); } } if (monster.toRemove){ monsters.splice(x,1); // Removes the monster from the array } } Thanks in advance if anyone can point me in the right direction!! This has been driving me mad for a while!
  25. I'm tuning performance for my game. I'm using SpriteBatches where it is possible. So I have looked at PIXI sources(version 2.2.8) and made next assumptions about SpriteBatch performance: WebGL: Inside each SpriteBatch I should use textures only from one spritesheet. Otherwise on each render WebGLFastSpriteBatch.flush is called which is expensive operation and should be avoided. Canvas: SpriteBatch children can be from different spritesheets it won't affect performance. But we should avoid child rotation because it would call context.setTransform multiple times. Overall: Using sb for canvas improves performance very slightly. For WebGL it gives significant boost. Please correct me if I wrong. Thanks in advance!