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 283 results

  1. Hi, I'm using Pixi since several days on a game prototype which consists in a map made of tiles. The problem is that I got a big map (2000px / 2000px), so it don't fit a desktop screen, and not any mobile screen. I am looking for a way to allow the user to pan (i.e. navigating on the canvas with mouse drag and drops (for desktop) and with the finger (for mobile devices) zoom in / out the canvas Like in google maps for example Any idea of an embedded feature I can use? Thanks in advance for you answers.
  2. Hi, On some Android devices canvas renderer works better and stable than Web GL Some games may crash in Web GL mode when in canvas mode all games stable. I want to ask is there any way how can we detect it ? Maybe some benchmarks exist ?
  3. Hi All, I am a JavaScript developer with more than 7+ years of experience on HTML5 game development, i can work on game development for multiple platforms. I can work on projects with limited timeline and budget, available for both part time and full time. Regards, Gideon
  4. 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/
  5. I have this idea for creating a character customization system. The system would be implemented as follows. 1) Organize a base template sprite sheet with character components arranged in a composition for future compositing. Example: Lets assume a full body template for a characters design is 125 by 125 consisting of head, body, and leg components. The head component of the character would use 25 pixels and would be isolated on separate parts of the sprite sheet that occupies the respective pixels while the rest of the 100/125 pixels are blank. The same would be done for the body and leg components. 2) Bind the components together via some sort of linked list or maybe even graph based implementation. I'm still learning about graphs and am thinking they're best for this system given compositing more complex sprite sheets will involve layers. Any advised implementations or any kind of information on graphs associated with player creation systems is highly appreciated. I think this is a great opportunity to practice graphs. 3) Next there will be an interface that allows the player to choose the color and textures of each of these components. The player will confirm and submit their design when finished. Now that the player has submitted their design, I'm a bit puzzled about the next step and have a few ideas on composing the data. 4a) Use Phaser api to turn the data into bitmaps? I don't know much about this implementation yet since I'm still learning how to utilize bitmaps and how Phaser handles bitmaps 4b) Composite the items on a canvas and store it in a uri using the canvas to url method. I also lack experience with api but I definitely can see how it would work. 5) Ideally I'll save the data to a database and retrieve them via player credentials. I'm not sure if I'm over complicating things or not so any feedback would be appreciated. I use Phaser but any html5 based idea or solution should be fine.
  6. Hey, Everyone I'm dying making attempts to scale canvas for high dpi mobiles and get everything work correctly. Problem: When I start Phaser with 100% width/height for canvas it will be created according to css pixel size of device (window.innerWidth/innerHeight). So iPhone 6S for example, gets, 375x667 canvas, but in fact, of course it should be 2x bigger because devicePixelRatio is 2. Result, everything is blurry and not as expected. Ok, I decided to set width and height with devicePixelRatio included and then set CSS size of canvas to 100% of view port. let w = window.innerWidth * window.devicePixelRatio; let h = window.innerHeight * window.devicePixelRatio; let game = new Game(w, h) // And then in style sheet: canvas { width: 100vw !important; height: 100vh !important; } Now, it seems like everything looks perfect and as expected (is it correct way to do it?). But, another problem rises. Seems like after this events.onInputDown do not work correctly. When I click on sprite nothing happens, but in different location click handled. Seems like coordinates of input arena is messed up. Can someone help me this this?
  7. Hello! I'm trying to scale my game using custom CSS rather than ScaleManager (I have some specific dynamic scaling I'd like to do depending on the browser size and aspect ratio and it's just easier to do it using custom CSS). The problem is that even in NO_SCALE mode, when the browser is resized, the canvas inline style width/height values are always overridden with the game's default width and height. I can't seem to find a way to turn this off so that I can customize the canvas width/height myself. Any ideas?
  8. Morning! Just working on a bit of a debug console for my game, was just wondering if it was at all possible to switch the renderers at runtime? Have tried a couple of methods, but it just halts the code from executing I think (no error), but guessing it would be a nogo?
  9. I'm trying to move a canvas object towards a onmousedown position, which gets sent from a user to the server. But my problem is the following: The object on the canvas is only moving a little step towards the delivered position. There must be a problem which could be caused by the dest calculation. Youtube video which shows my problem: https://www.youtube.com/watch?v=XxB1dNsuY38 A jsfiddle with a working example: http://jsfiddle.net/loktar/5d02ooaf/ Code which sends the position from the user to the server and which draws each user on the canvas: <script type="text/javascript"> var ctx = document.getElementById("ctx").getContext("2d"); ctx.canvas.width = window.innerWidth; ctx.canvas.height = window.innerHeight - 142; var socket = io(); socket.on('newPositions', function(data) { ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); ctx.fillStyle = "rgb(255,0,0)"; ctx.beginPath(); for(var i = 0; i < data.length; i++){ ctx.arc(data[i].x, data[i].y, 10, 0, Math.PI * 2); } ctx.closePath(); ctx.fill(); }); document.onmousedown = function(event) { socket.emit('positionUpdate', {x: event.pageX - ctx.canvas.offsetLeft, y: event.pageY - ctx.canvas.offsetTop, state: true}); } document.onmouseup = function(event) { socket.emit('positionUpdate', {x: event.pageX - ctx.canvas.offsetLeft, y: event.pageY - ctx.canvas.offsetTop, state: false}); } </script> Part of the app.js code which contains the current position update code var serv = require('http').Server(app); var SOCKET_LIST = []; var PLAYER_LIST = []; var Player = function(id, x, y){ var self = { x: 100, y: 100, id: id, number: "" + Math.floor(10 * Math.random()), mouseMovement: false, maxSpd: 5, radius: 10 } self.updatePosition = function(x, y) { if(self.mouseMovement){ // Problem movement var targetX = x; var targetY = y; var tx = targetX - self.x; var ty = targetY - self.y; var dist = Math.sqrt(tx * tx + ty * ty); var velX = (tx / dist) * self.maxSpd; var velY = (ty / dist) * self.maxSpd; if (dist > self.radius / 2) { self.x += velX; self.y += velY; } // Problem movement end } } return self; } var io = require('socket.io')(serv, {}); io.sockets.on('connection', function(socket){ console.log('socket connection'); socket.id = Math.random(); SOCKET_LIST[socket.id] = socket; var player = Player(socket.id); PLAYER_LIST[socket.id] = player; socket.on('disconnect', function(){ delete SOCKET_LIST[socket.id]; delete PLAYER_LIST[socket.id]; }); socket.on('positionUpdate', function(data){ player.mouseMovement = data.state; player.updatePosition(data.x, data.y); }); }); setInterval(function(){ var pack = []; for(var i in PLAYER_LIST){ var player = PLAYER_LIST[i]; player.updatePosition(); pack.push({ x:player.x, y:player.y, number:player.number }); } for(var i in SOCKET_LIST){ var socket = SOCKET_LIST[i]; socket.emit('newPositions', pack); } }, 1000/30); Explaination: The following code sends the target position to the server: document.onmousedown = function(event) { socket.emit('positionUpdate', {x: event.pageX - ctx.canvas.offsetLeft, y: event.pageY -ctx.canvas.offsetTop, state: true}); } Then the following code will be triggered: socket.on('positionUpdate', function(data){ player.mouseMovement = data.state; player.updatePosition(data.x, data.y); }); Which will set the player.mouseMovement to true and delivers the targeted x and y cordinates to the player.updatePosition function: self.updatePosition = function(x, y) { if(self.mouseMovement){ // Problem movement var targetX = x; var targetY = y; var tx = targetX - self.x; var ty = targetY - self.y; var dist = Math.sqrt(tx * tx + ty * ty); var velX = (tx / dist) * self.maxSpd; var velY = (ty / dist) * self.maxSpd; if (dist > self.radius / 2) { self.x += velX; self.y += velY; } // Problem movement end } } I would appreciate any kind of help or suggestions.
  10. Hi All, I'm a JavaScript developer with goods hands on experience on game development. I need artists to develop games for IOS ,Android and web. if any one intrested do Pm me.
  11. 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/ Marble labyrinth 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/ 4/ Don't touch the spikes (clone) Created MAY 05, 2017 Link : https://codepen.io/Gthibaud/full/aWLjKL/
  12. Hi, I know this should not be BabylonJS issue, just intend to aware people that Lenovo Phab 2 Pro may have canvas rendering issue. I am using chome to open the webpage, while firefox and opera had no problem displaying the 3D scene. below are screenshots of webpage with webgl content: The Sponza Demo: www.babylonjs.com/demos/sponza/ The Espilit Demo: https://www.babylonjs.com/demos/espilit/ The Instances Demo: https://www.babylonjs.com/demos/instances/ And all ThreeJS projects I had viewed so far have this issue too: Lasertown: http://oletus.github.io/lasertown/ The Aviator: https://tympanus.net/Tutorials/TheAviator/ It looks like the major area of the canvas is covered, and leaving only a small rectangle area at the left bottom corner to be viewable, I am able to apply user input beyond the viewable rectangle area to navigate the scene(for example the Espilit demo). I had file an bug report to chrome and intend to file another one to lenovo as well.
  13. Hey guys, I'm looking for some advice on canvas scaling. We're working on a PixiJS game and want to have the canvas as big as possible based on a set aspect ratio. I've got it all working fine but when I started testing it on our benchmark devices I noticed the performance has dropped horribly. When I scale the canvas using CSS transform the performance is perfect but then the graphic quality is unacceptable. Does anyone have some advice how to get great scaling on any device (including 4k monitors) while still maintaining performance and good graphic quality? --- Good performance but bad quality scaling method const canvas: HTMLCanvasElement = document.getElementById('game-stage') as HTMLCanvasElement; const width = window.innerWidth; const height = window.innerHeight; const ratio = window.devicePixelRatio * 2; canvas.style.transformOrigin = '0 0'; canvas.style.transform = `scale(${Math.min(width / Constants.FIELD_SIZE.x, height / Constants.FIELD_SIZE.y)})`; this.app.renderer.resize(canvas.width, canvas.height); Good quality scaling but bad performance scaling method const canvas: HTMLCanvasElement = document.getElementById('game-stage') as HTMLCanvasElement; const width = window.innerWidth; const height = window.innerHeight; const ratio = window.devicePixelRatio * 2; canvas.width = width * ratio; canvas.height = height * ratio; canvas.style.width = width + 'px'; canvas.style.height = height + 'px'; if (height / Constants.FIELD_SIZE.y < width / Constants.FIELD_SIZE.x) { this.scene.scale.x = this.scene.scale.y = height / Constants.FIELD_SIZE.y * ratio; } else { this.scene.scale.x = this.scene.scale.y = width / Constants.FIELD_SIZE.x * ratio; } this.app.renderer.resize(canvas.width, canvas.height);
  14. This past weekend, I took a break from working on another game I'm working on called Space Pizzas (here's the forum post) to try out a couple web development technologies I hadn’t previously used: GlimmerJS and TypeScript. If you're not familiar with Glimmer, it is a component library (like React) with quite a bit more tooling (like Ember). And if you're not familiar with TypeScript, it is superset of JavaScript that adds a type system in the hopes of making big applications less fraught with peril than your typical big JavaScript app.Using the above technologies, I made a game called Croissant Hoops in the vein of Qwiboo’s Ball King. The idea of the game is to use the mouse or touch to drag an arc that will place the basketball into the hoop. I also added a slider that changes the games gravity (I mostly did this to try out the property bindings in Glimmer).The game can be played at hoops.spacepizzas.com.Here’s a GIF of Croissant Hoops: In case anyone is interested, I put the source code on GitHub. The game is made directly on an HTML <canvas>. If I were going to go any further with this game, I'd probably use a framework like Phaser, but I think I'll probably leave the game as it is for now.
  15. Hello, How do I make my canvas look the same on all devices? function PixiPlay(){ var renderer = PIXI.autoDetectRenderer(350,460,{antialias: false, transparent: false}); document.body.appendChild(renderer.view); var root = new PIXI.Container(); I saw a tutorial talking about Pixiv4. But he talks almost nothing about the canvas Can anyone teach me how to do this, in a simple way, please?
  16. 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
  17. 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;
  18. 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?
  19. 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
  20. 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
  21. 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);
  22. 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); }
  23. 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)
  24. 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:
  25. 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.