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! 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
  2. 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
  3. 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.
  4. 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.
  5. 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.
  6. hi, as "detect" the collision of a sprite with the edges of my canvas ?
  7. 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>
  8. 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 .
  9. 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
  10. 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
  11. 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?
  12. 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
  13. 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?
  14. 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
  15. 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.
  16. 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
  17. 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.
  18. 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!
  19. 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:
  20. 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!
  21. 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
  22. Hello, I need to know that how can we render the game "canvas" in to a specific div or area. example <table> <tr> <td> Your adds here </td> <td id="Game"> Here game </td> <td> Your adds here </td> </tr> </table>
  23. Hey guys! We just released pixi.js 1.5.2 Heres a list of all the new shiny awesome we added: New featuresCacheAsBitmap added to displayObjectsCacheAsBitmap added to Graphics ObjectAdded generateTexture function to DispalyObjectsAdded optional FilterArea to displayObject (for optimisation)removeChildAt function added to DisplayObject (@andrevenancio)removeChildren function added to DisplayObject (@andrevenancio)dropShadow properties added to Text.Graphics chaining functions Bug FixesFixed setTexture bug with TilingSpriteFixed anchor point bug in canvas with TilingSpriteFixed positionOffset not begin correct in TilingSpriteFixed issue where filters were not being applied to TilingSpriteFixed SpriteBatch canvas transform bugFixed issue with mouseupoutside not firing, when mouse is out of document body (@ekelokorpi)Fixed Cached textures issue when using base64 encoded images (@cacheflowe)Fixed issue where visibility was not being respected in sprite batchFixed bug in gl.bindTexture which tried to use an undefined private var. (@photonstorm)Fixed the 'short cut' version of Math.floor in setTransform if roundPixels is true. (@photonstorm)Fixed cross domain so it is now true by defaultLoader now uses ie9s XDomainRequest object when loading sprite sheet data so loadin crossdomain sprite sheets in ie9 now works like a champFixed AssetLoader undefined evt.loader (@ekelokorpi) MiscAdded cacheAsBitmapExampleDocumentation tweaksLowered the default size of SpriteBatch from 10000 to 2000 as this yields faster results on mobileGrunt watch task added to grunt file (@mattdesl)Karma verison updated Thats the lot, I hope you guys will find the new version useful! Oh and a massive thanks to everyone who helped out! Ya can get the new version here: Or read a little more about it on our blog to if ya fancy: Enjoy!
  24. Hello html5game dev forum people! Big news over in the pixi camp! We have just released the latest and greatest version of pixi.js for you to play with and make more cool stuff! Lots more detail can be found on our goodboy blog. But heres the list of new stuff / tweaks included in the latest version: New features: WebGL FiltersAdded Sprite Tinting (canvas and webGL)Added Sprite blend modes (canvas and webGL)Added webGL context loss handlingNew webGL rendererRestructured the canvas rendererAdded ability to have multiple renderers on one web pageAdded support for trimmed sprite sheetsAdd a Contributing GuideAdd an Atlas Spritesheet loader (#444, @MKelm)Implement swapChildren (#431, @namuol)Add base64 support to asset loader (#414, @mattdesl)Add totalFrames to PIXI.MovieClip (#315, @MikkoH)Add uniform sprite sheet loader (#311, @alaa-eddine)Make Interactive dom element configurable (#321, @MikkoH)Add AMD export (#267)Implement travis-ci and jshint integration (thanks @drkibitz)webGL renderer is now fully compatible with IE11Fully compatible with Cocoon.js (@ekelokorpi)Fixed issue where PIXI.TilingSprite required a power of two texture. It now accepts any texture.Added new tint exampleAdded new blendMode exampleAdded cacheAsBitmap to PIXI.Graphics object. Useful for complex graphics objects. Also a great way to guarantee antialiasing on graphics objects in webGL as it renders using canvasAdded generateTexture to PIXI.Graphics object. This function returns a PIXI.Texture of the graphics object. Useful if the graphics objects as is used multiple timesAdded AlphaMaskFilter Bug Fixes Fix issue where urls have http in the resource (#443, @sirflo)Fix IE11 check (#442, @photonstorm)Fix issues where nested Masking was not working correctly in webGLFix cursor style for interactive sprites (#347, @lain-dono)Fix issues with texture destroy (#415, @mattdesl)Fix incorrect BitmapText width (#425, @jcd-as)Fix issue with query params on asset loader (#400, @hugeen)Fix transparent background on objects (#286, @mdoch)Fix problems with event emitter (#187, @johnste)Fix handling of black colors (#288)Fix an issue with empty masks (#313)Fix detector code (#358, @mattdesl)Fix issues with IE ajaxFix misc bugs with PIXI.GraphicsFix issue with removing children with filtersFix a bunch of documentation errorsFix setText to be on proper prototype (#330)Redundant code removed from SpineLoader and SpriteSheetLoader (@Nibbler999)Big thanks to everyone who contributed to this pixi release! We all hope you enjoy using pixi.js 1.4
  25. Hi there, I'm wondering, if it is valid/possible to set game width/height after game object initialization? What I'm trying to do is set actual game size in boot state when things such device is available. Unfortunately, it takes no effect on canvas, still the same dimension as once set at game object initialization phase. Any suggestion? Thanks!