Search the Community

Showing results for tags 'canvas'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

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

  1. 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;
  2. 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: http://www.goodboydigital.com/runpixierun/ http://www.theleisuresociety.co.uk/fightforeveryone/ http://flashvhtml.com/ experiments: http://gametest.mobi/pixi/morph/ http://gametest.mobi/pixi/balls/ http://www.goodboydigital.com/pixijs/bunnymark/
  3. 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
  4. 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?
  5. 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/ Jeu de bille Created JANUARY 23, 2017 tilt the screen with your mouse and move the sphere to the square, beware the holes in the ground. Link: http://codepen.io/Gthibaud/full/zNwgmZ/ 2/ The Dungeon Created FEBRUARY 07, 2017 walk through the dungeon, each time you enter a new room your score get higher. Link: http://codepen.io/Gthibaud/full/MJqgzv/ 3/ Copycat Created MARCH 30, 2017 This game is about cloned cats which you control at the same time Link: https://codepen.io/Gthibaud/full/ryQRYP/
  6. 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: http://pratishshr.github.io/mario-maker/ Link to Repo: https://github.com/pratishshr/mario-maker
  7. 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? http://www.babylonjs-playground.com/#1B4NJV#3
  8. 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);
  9. 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); }
  10. 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: http://jsfiddle.net/mnj0vteL/1/ - Canvas mode - it doesn't draw the circle (in Safari) http://jsfiddle.net/uxujy4pu/ - 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)
  11. 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:
  12. 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: http://www.williammalone.com/articles/create-html5-canvas-javascript-sprite-animation/ <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.
  13. 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: https://jsfiddle.net/gustavgb/anxcjfof/5/ 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!
  14. 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
  15. 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.
  16. 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?
  17. 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 http://www.babylonjs-playground.com/#9U086#4 (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 + rect1.top | 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: http://www.steidle.net/playground/webgl/shirt/test.html 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
  18. 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. (http://davikingcode.com/dl-works/bunnyjs/ ). I found on the web an example working really fine on iOS landscape mode (http://www.goodboydigital.com/runpixierun/) 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.
  19. 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.
  20. embracethebunny.org is an experimental website being built with the vision of allowing people to create and share their own 2D adventures with the world. Basically, what i'm going for is the ability for people to create simple point-and-click adventures by just visiting the site and using the site's web interface, without having to learn any coding. Just share a link with other people to share your adventure. Built-in multiplayer support would be there as well, so people could just drop-in/drop-out with ease. Right now it's just a rough POC. You can't do much with it other than create glorified chat rooms. Here's a test thing i created using the site (it's a little homage to Legend of Zelda): https://www.embracethebunny.org/main/10223ce6-281b-4aee-95d2-b5644fd70b38/poc-1/sandbox You can poke around the environment anonymously just by visiting the link. As a guest can create your own Link avatar and chat with anyone else visiting at the same time. Creating an account will persist your avatar between visits (admittedly not very useful at this point). I created the whole environment using the website admin tool. Video showing the current admin interface: https://www.youtube.com/watch?v=ePolUmEN91E. Site uses HTML5 and web sockets. Any feedback is welcome. Thanks!
  21. Is there anything like "Stage Width and Height"... I am asking because i am getting some weird scaling where the X scale looks like it "real skinny" ONLY when i change the #renderCanvas to try and make 600 x 900 canvas center in page... Centers and looks great but my models look "SQEEZED": For now i get by by just adding a little KLUDGE to the scaling.x by giving it an offset... Should look more like this: Is there some kind of stage width and height and or scaling options we have to set when not using a canvas at 100% Here my my #css: #cvs { position: absolute; width: 600px; height: 900px; margin: auto; top: 0; left: 0; right: 0; bottom: 0; padding: 0; opacity: 0; z-index: 0; outline: none; touch-action: none; -ms-touch-action: none; background-color: #000000; } Anyone Got Any Ideas On This One ???
  22. Hi all... This is my first post on this forum, so tell me if I'm breaking any rules . I've just been getting into html5 canvas game programming, and I'm just making a simple shooter game (NOT space invaders style). Basically, my green square guy (controlled by arrow keys) gets chased by the red square guys. I want to be able to have him shoot them (spacebar) with a little blue square, which I want to fly at them, no aiming required, and then disappear on contact, but none of the code I've tried has worked yet. Just want some pointers on how to implement that. Thanks. Included JS file. game.js run.html
  23. canvas

    The Example. Hello every body. I have a Canvas with red background. On it I have rows of boxes, which go exactly after each other. Each box begins exactly where previous box ends, and they all have same skew. So there should not be any gap between edges, but as you can see in the example there are gaps. Does anybody knows why is this happening, and how to get rid of it. console.clear(); var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var world = { centerY: canvas.height / 2, centerX: canvas.width / 2 } var rowCount = 14; var box = { width: 20, height: 20, skew: 10 } function drawBox(x, y, id) { ctx.save(); ctx.beginPath(); ctx.moveTo(x, y); ctx.lineTo(x + box.width, y); ctx.lineTo(x + box.width + box.skew, y - 20); ctx.lineTo(x + box.skew, y - box.height); ctx.lineTo(x, y); ctx.closePath(); ctx.clip(); ctx.clearRect(0,0, canvas.width, canvas.height); ctx.fillStyle = id % 2 == 0 ? 'lightgray' : 'darkgray'; ctx.fill(); ctx.restore(); } for (var i = 0; i < 112; i++) { var k = Math.floor(i / rowCount) * rowCount; console.log(k); drawBox(i * box.width - (k * box.width), Math.floor(i / rowCount) * box.height, i) } #canvas { background-color: red; width: 800px; height: 600px; } <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <canvas id="canvas"> </canvas> </body> </html>
  24. The Issue Text object is getting cut-off / cropped at the top and sometimes on the bottom, when using a custom font with a narrow width. (screenshot attached) The fonts in question work correctly in every other environment, and even work with HTML canvas and the regular getContext method of adding text. So i'm fairly positive the issue is isolated to Phaser using HTML canvas. Possible Cause I think issue is most likely happening due to the way Phaser/PIXI calculates the height of text from the width of letters. Possibly using the width of the widest letter and assuming the height? I tried to work out what the source code is doing. Current Workaround The only workaround i've found is rebuilding the font and adding a wide margin to each letter (so the letter boundaries are more 'square'), then in Phaser splitting a Text object into individual Text objects for letters and calculating their position based on letter width, and manually subtracting a value to change the letter spacing. But even splitting and repositioning doesn't work that well (with any font, not just thin fonts) i have to calculate separate margins for even thinner letters like 'I', 'i', or 'l', or wide letters like 'm' and 'w'. I would rather not use BitmapText as i need to use different font sizes. Solutions Has anybody else encountered this issue? Found a solution or a better work-around? Thanks.
  25. A small 'spacebar' or basic platform game which forms part of a Christmas Marketing campaign. Really simple, just hit space or tap your screen. http://www.workhousemarketing.com/christmas2016/rooftoprun/ It's been a tight build, with a very tight timescale, but I'm quite happy with it overall. It's not perfect, and working on a range of devices has been 'fun'. Especially iOS Safari with it's full UI elements :/ I'd be happy to get any feedback and thoughts. Overall I hope it's just a fun couple of minutes distraction! Leave a comment, or if you want, you can find my work twitter (different to my normal twitter) @workhouse_chris