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

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Website URL


Twitter


Skype


Location


Interests

Found 344 results

  1. Hello guys, I'm new to this forum and to BabylonJS. The question about multiple scenes isn't new, I know. I already read some threads, but the answers didn't work for me. I need two scenes that act simultaneously. Only one scene should be visible at a time, the other should run in the background. I also want a button in each scene to switch to the other scene. For some reason I can't run my scenes with playground, so i just send you my html-files as an example. I'm sorry for the effort. 2engines.html is a modification of a version someone posted in one of the threads about two canvas and engines. It's nearly what I want, but the button to switch the scene is shown for just one scene (you can switch the scene without button by pressing '1'). I don't know if I have to use multiple canvas for my request. Multiview.html is an example how it could look like (also an experiment with multiviews). I call the createScene-function everytime to switch, so the scene will always start from the beginning. I want to switch to the other scene without restarting it, so you can see the progress of whatever happens there, while running in background. The main goal is to create a platform with a couple of minigames (solve a puzzle, realtime strategy, first-person-shooter etc.) via browser. Students can program their own agents and let them fight against pre-programmed agents. People or students that don't play should be able to watch one of those games and switch the camera (or scene) to watch another game. I'm trying to find out if it's possible to realize this concept (or rather the representation with scenes and cameras) with BabylonJS. I'm not the one creating this platform. It is part of my study project to find out, if BabylonJS is the right framework for this. Wow, that was a huge spam. I hope there wasn't too much unnecessary information and that I've made myself clear. Best regards. 2engines.html multiview.html
  2. Thunderfist

    Collision not working

    So, I've managed to make my character sprite move, but the collision doesn't work and the sprite can move out of bound even though I've defined the outOfBounds function. Is there anything I can do about this? And so you know, when this: if (!obstacleCollision) { this.drawX = newDrawX; this.drawY = newDrawY; } is changed to this: if (!obstacleCollision && !outOfBounds (this, newDrawX, newDrawY) { this.drawX = newDrawX; this.drawY = newDrawY; } The sprite is locked in place! I had to remove that part in order for the code to work.
  3. Thunderfist

    Character movement not working

    I managed to get a character sprite to appear on my project's testmap. The problem I'm having is that the movement code isn't working and I can't figure out why. There aren't any errors in the browser console, which makes this harder. Here's the game.js code: //establish variables var canvasBg = document.getElementById("canvasBg"), ctxBg = canvasBg.getContext("2d"), canvasEntities = document.getElementById("canvasEntities"), ctxEntities = canvasEntities.getContext("2d"), canvasWidth = canvasBg.width, canvasHeight = canvasBg.height, player1 = new Player(), isPlaying = false, obstacles = [], //animation requestAnimFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) { window.setTimeout(callback, 1000 / 60); }, imgSprite = new Image(); imgPlayer = new Image(); imgSprite.src = "img/testroomImage.png"; imgSprite.addEventListener("load", init, false); imgPlayer.src = "img/player.png"; imgPlayer.addEventListener("load", init, false); function init() { document.addEventListener("keydown", function(e) {checkKey(e, true);}, false); document.addEventListener("keyup", function(e) {checkKey(e, false);}, false); defineObstacles(); begin(); } function begin() { ctxBg.drawImage(imgSprite, 0, 0, canvasWidth, canvasHeight, 0, 0, canvasWidth, canvasHeight); isPlaying = true; requestAnimFrame(loop); } function update() { clearCtx(ctxEntities); player1.update(); } function draw() { player1.draw(); } function loop() { if (isPlaying) { update(); draw(); requestAnimFrame(loop); } } function clearCtx(ctx) { ctx.clearRect(0, 0, canvasWidth, canvasHeight); } function randomRange(min, max) { return Math.floor(Math.random() * (max + 1 - min)) + min; } function Player() { this.srcX = 0; this.srcY = 0; this.width = 12; this.height = 21; this.drawX = 0; this.drawY = 0; this.centerX = this.drawX + (this.width / 2); this.centerY = this.drawY + (this.height / 2); this.speed = 2; this.isUpKey = false; this.isRightKey = false; this.isDownKey = false; this.isLeftKey = false; } Player.prototype.update = function () { this.centerX = this.drawX + (this.width / 2); this.centerY = this.drawY + (this.height / 2); this.checkDirection(); }; Player.prototype.draw = function () { ctxEntities.drawImage(imgPlayer, this.srcX, this.srcY, this.width, this.height, this.drawX, this.drawY, this.width, this.height); }; Player.prototype.checkDirection = function () { var newDrawX = this.drawX, newDrawY = this.drawY, obstacleCollision = false; if (this.isUpKey) { newDrawY -= this.speed; this.srcX = 12; //Facing North } else if (this.isDownKey) { newDrawY += this.speed; this.srcX = 0; //Facing South } else if (this.isRightKey) { newDrawX += this.speed; this.srcX = 36; //Facing East } else if (this.isLeftKey) { newDrawX -= this.speed; this.srcX = 24; //Facing West } obstacleCollision = this.checkObstacleCollide(newDrawX, newDrawY); if (!obstacleCollision && !outOfBounds(this, newDrawX, newDrawY)) { this.drawX = newDrawX; this.drawY = newDrawY; } }; Player.prototype.checkObstacleCollide = function (newDrawX, newDrawY) { var obstacleCounter = 0, newCenterX = newDrawX + (this.width / 2), newCenterY = newDrawY + (this.height / 2); for (var i = 0; i < obstacles.length; i++) { if (obstacles[i].leftX < newCenterX && newCenterX < obstacles[i].rightX && obstacles[i].topY -20 < newCenterY && newCenterY < obstacles[i].bottomY - 20) { obstacleCounter = 0; } else { obstacleCounter++; } } if (obstacleCounter === obstacles.length) { return false; } else { return true; } }; function Obstacle(x, y, w, h) { this.drawX = x; this.drawY = y; this.width = w; this.height = h; this.leftX = this.drawX; this.rightX = this.drawX + this.width; this.topY = this.drawY; this.bottomY = this.drawY + this.height; } function defineObstacles() { var treeWidth = 65, treeHeight = 90, rockDimensions = 30, bushHeight = 28; obstacles = [new Obstacle(78, 360, treeWidth, treeHeight), new Obstacle(390, 395, treeWidth, treeHeight), new Obstacle(415, 102, treeWidth, treeHeight), new Obstacle(619, 185, treeWidth, treeHeight), new Obstacle(97, 63, rockDimensions, rockDimensions), new Obstacle(296, 379, rockDimensions, rockDimensions), new Obstacle(285, 25, 150, bushHeight), new Obstacle(570, 138, 150, bushHeight), new Obstacle(605, 492, 90, bushHeight)]; } function checkKey(e, value) { var keyID = e.keyCode || e.which; if (keyID === 38) { //up arrow player1.isUpKey = value; e.preventDefault(); } if (keyID === 39) { //right arrow player1.isRightKey = value; e.preventDefault(); } if (keyID === 40) { //down arrow player1.isDownKey = value; e.preventDefault(); } if (keyID === 37) { //left arrow player1.isLeftKey = value; e.preventDefault(); } if (keyID === 32) { //spacebar player1.isSpacebar = value; e.preventDefault(); } }; function outOfBounds(a, x, y) { var newBottomY = y + a.height, newTopY = y, newRightX = x + a.width, newLeftX = x, treeLineTop = 512, treeLineBottom = 512, treeLineRight = 750, treeLineLeft = 65; return newBottomY > treeLineBottom || newTopY < treeLineTop || newRightX > treeLineRight || newLeftX < treeLineLeft; } Any ideas that could be used to fix the problems?
  4. Hello everyone! i have a very specific question, i need to somehow pause the game at the end of the frame render, execute a function and then render the next frame, and do the same over and over, is that possible? if there is no function that would allow to do that, what is the function that takes care of the scene rendering so i could modify it? Thanks!
  5. Foobar

    I need you.

    Hello, here I created game but I have a problem with a function. When did the party begin to have a message that says "Go!" and I would like it to change when the player reaches 100 points. My last try script that absolutely does not work. function textChange() { updateScore(); if (player.score == 100) { updateText("Good!"); } } Thanks all
  6. GideonSam

    Brush tool in Phaser

    Hi All, I have been working on a Simple paint app for kids. I have a problem in implementing the simple brush tool. Im getting small dots and line here there in the screen Unable to draw on free hand movement like a brush. kindly help. playGame.prototype = { preload: function () { }, create: function () { game.stage.backgroundColor = '#222222'; game.input.onDown.add(this.onStageDOwn, this); game.input.onUp.add(this.onStageUP, this); }, onStageUP: function () { game.input.deleteMoveCallback(this.paints, this); }, onStageDOwn: function (pointer, x, y) { graphicsMC = this.game.add.graphics(); graphicsMC.lineStyle(2, 0xffd900, 1); graphicsMC.moveTo(pointer.x, pointer.y); game.input.addMoveCallback(this.paints, this); }, paints: function (pointer, x, y) { graphicsMC.lineTo(pointer.x, pointer.y); } };
  7. We are seeing very unusual performance on a vizio smart tv platform. Pixi finds WebGL and so does HTML5Test. However, a simple test based on bunnymark shows 14fps + video blanking between each frame. When we switch to the Canvas2D renderer, we see 30fps and smooth animation, no blanking. Has anyone played with the vizio? They do have a custom SOC (2 core, 4 gpu) which leads me to suspect there is some quirkyness in their webgl implementation. We also ran a standard bunnymark with similar bad webgl results.
  8. Thunderfist

    Character sprite not appearing

    I've been working on an action RPG for quite a while now, and I finally got my map to appear. Now I'm having a hard time getting my character sprite to appear. I have no idea what I should do about this. Here's my code: //establish variables var canvasBg = document.getElementById("canvasBg"), ctxBg = canvasBg.getContext("2d"), canvasEntities = document.getElementById("canvasEntities"), ctxEntities = canvasEntities.getContext("2d"), canvasWidth = canvasBg.width, canvasHeight = canvasBg.height, player1 = new Player(), isPlaying = false, obstacles = [], //animation requestAnimFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) { window.setTimeout(callback, 1000 / 60); }, imgSprite = new Image(); imgSprite.src = "img/testroomImage.png"; imgSprite.addEventListener("load", init, false); player1.src = "img/player.png"; function init() { document.addEventListener("keydown", function(e) {checkKey(e, true);}, false); document.addEventListener("keyup", function(e) {checkKey(e, false);}, false); defineObstacles(); begin(); } function begin() { ctxBg.drawImage(imgSprite, 0, 0, canvasWidth, canvasHeight, 0, 0, canvasWidth, canvasHeight); isPlaying = true; requestAnimFrame(loop); } function update() { clearCtx(ctxEntities); player1.update(); } function draw() { player1.draw(); } function loop() { if (isPlaying) { update(); draw(); requestAnimFrame(loop); } } function clearCtx(ctx) { ctx.clearRect(0, 0, canvasWidth, canvasHeight); } function randomRange(min, max) { return Math.floor(Math.random() * (max + 1 - min)) + min; } function Player() { this.srcX = 0; this.srcY = 600; this.width = 35; this.height = 54; this.drawX = 400; this.drawY = 300; this.centerX = this.drawX + (this.width / 2); this.centerY = this.drawY + (this.height / 2); this.speed = 2; this.isUpKey = false; this.isRightKey = false; this.isDownKey = false; this.isLeftKey = false; } Player.prototype.update = function () { this.centerX = this.drawX + (this.width / 2); this.centerY = this.drawY + (this.height / 2); this.checkDirection(); }; Player.prototype.draw = function () { ctxEntities.drawImage(imgSprite, this.srcX, this.srcY, this.width, this.height, this.drawX, this.drawY, this.width, this.height); }; Player.prototype.checkDirection = function () { var newDrawX = this.drawX, newDrawY = this.drawY, obstacleCollision = false; if (this.isUpKey) { newDrawY -= this.speed; this.srcX = 35; //Facing North } else if (this.isDownKey) { newDrawY += this.speed; this.srcX = 0; //Facing South } else if (this.isRightKey) { newDrawX += this.speed; this.srcX = 105; //Facing East } else if (this.isLeftKey) { newDrawX -= this.speed; this.srcX = 70; //Facing West } obstacleCollision = this.checkObstacleCollide(newDrawX, newDrawY); if (!obstacleCollision && !outOfBounds(this, newDrawX, newDrawY)) { this.drawX = newDrawX; this.drawY = newDrawY; } }; Player.prototype.checkObstacleCollide = function (newDrawX, newDrawY) { var obstacleCounter = 0, newCenterX = newDrawX + (this.width / 2), newCenterY = newDrawY + (this.height / 2); for (var i = 0; i < obstacles.length; i++) { if (obstacles[i].leftX < newCenterX && newCenterX < obstacles[i].rightX && obstacles[i].topY -20 < newCenterY && newCenterY < obstacles[i].bottomY - 20) { obstacleCounter = 0; } else { obstacleCounter++; } } if (obstacleCounter === obstacles.length) { return false; } else { return true; } }; function Obstacle(x, y, w, h) { this.drawX = x; this.drawY = y; this.width = w; this.height = h; this.leftX = this.drawX; this.rightX = this.drawX + this.width; this.topY = this.drawY; this.bottomY = this.drawY + this.height; } function defineObstacles() { var treeWidth = 65, treeHeight = 90, rockDimensions = 30, bushHeight = 28; obstacles = [new Obstacle(78, 360, treeWidth, treeHeight), new Obstacle(390, 395, treeWidth, treeHeight), new Obstacle(415, 102, treeWidth, treeHeight), new Obstacle(619, 185, treeWidth, treeHeight), new Obstacle(97, 63, rockDimensions, rockDimensions), new Obstacle(296, 379, rockDimensions, rockDimensions), new Obstacle(285, 25, 150, bushHeight), new Obstacle(570, 138, 150, bushHeight), new Obstacle(605, 492, 90, bushHeight)]; } function checkKey(e, value) { var keyID = e.keyCode || e.which; if (keyID === 38) { //up arrow player1.isUpKey = value; e.preventDefault(); } if (keyID === 39) { //right arrow player1.isRightKey = value; e.preventDefault(); } if (keyID === 40) { //down arrow player1.isDownKey = value; e.preventDefault(); } if (keyID === 37) { //left arrow player1.isLeftKey = value; e.preventDefault(); } if (keyID === 32) { //spacebar player1.isSpacebar = value; e.preventDefault(); } }; function outOfBounds(a, x, y) { var newBottomY = y + a.height, newTopY = y, newRightX = x + a.width, newLeftX = x, treeLineTop = 5, treeLineBottom = 570, treeLineRight = 750, treeLineLeft = 65; return newBottomY > treeLineBottom || newTopY < treeLineTop || newRightX > treeLineRight || newLeftX < treeLineLeft; } Any ideas for what can be done to make the sprite appear?
  9. I need you to review the code of my new render engine or at least use it so you can give me feedback and report errors, if you need new documentation or anything just tell me. I'll add more things to the engine I'm tiking about support for 3D graphics and that a lot of code that will be added so I want to make sure that the current code works correctly. this is the repo: https://github.com/LuisHerasme/dibujo When I have this complete I will continue working in my game engine https://github.com/LuisHerasme/LienzoEngine My github page. https://luisherasme.github.io/
  10. Hi there, I have had a good look in the forums for this before asking, but I cannot seem to get my simple HTML canvas to run properly on my iPhoneX. My URL is here: http://lindsay.thefusion.works/ Initially I was trying to build a kaleidoscope (8 triangles making a square) but setting one triangle and then using the _cacheContext.rotate for the other 7 triangles meant that my iPhoneX was struggling to hit 3 frames per second. My old Galaxy S6 phone will render it flawlessly. The iPhone X will get really hot within a minute so it is definitely working overtime to try and keep up with a 3 year old Galaxy phone. This is in both Safari and Chrome on the iPhoneX. I have tried various optimisations and caching tricks but still cannot get the iPhone X to better than 3 frames per second. Does anybody have any hints or ideas on anything I can try to get my kaliedoscope working on iPhones? Thanks in advance, Lindsay.
  11. Muhammad Adnan

    Drag and dropping in a container

    Hey guys, So I was fiddling around with Pixi's drag example on their website. I was wondering how can one drop the object in a container. For example I want to move and object and when it reaches near the container it attaches on top of it. I'm really scared of posting this since people might think I want someone to code it for me but I just want to understand the concept and the things I can use, so to say a guide. Would appreciate the help
  12. Noob here using Phaser. But here's my issue: I'm struggling to get to a perfect scale on the game I'm building. The best option for me so far is Phaser.ScaleManager.RESIZE; But this method doesn't have a limit to the canvas size. If an user has a huge screen, say 30 inches, he'd have a lot of advantage over an user with a medium size screen, say 17 inches. The 30 inches user would have much more view of the world. I've tried to set the canvas to a fixed size, like 1280x720, then dynamically resize the canvas style. And using Phaser.ScaleManager.SHOW_ALL; But it doesn't do the trick because it shows the black borders and I can't get rid of it. To make it clear what I want to achieve, I'm building an online multiplayer game (.io). If you notice the most famous .io games like agar.io, diep.io and slither.io, the game scale is perfect for any screen size. If the screen is too big, the game doesn't show more screen. It just adjusts for a more zoomed game. Here's a gif of what I need and how my game is now: agar.io: https://gyazo.com/94a41e06816b8dc9a1fd4608c0cfa525 Notice that in agario, the screen only goes so far before the game starts to scale. My game: https://gyazo.com/4269ecfb1253b9ddbcd6e917ad1a8602 Notice how much of the world I can see after scaling my game. Meaning that there is no limit for the canvas. Please let me know if you need more information in order to help me out here! Thanks in advance!
  13. The canvas doesn't fit tight in the body. Is there a way to remove the margin? this.game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; this.game.scale.parentIsWindow = true; Not sure if these setting make a difference.
  14. Hello everyone!, I'm stuck with my 2d game.. i'm trying to give certain sprites a on mousehover event(i dont really know if this is possible lel but i am really new with canvas so pleas help me out). does anyone know a better way or the sollution for this??? regards, slyvan25
  15. jdeagle

    alphaMask from bitmapData

    Can you create a alphaMask from bitmapdata rather than images? I have a circle loader that I am building as bitmapData and I have the source image I want to mask, but I can't figure out how to use the mask bitmap data for bmd.alphaMask or convert the mask bitmapData to a image that the method can use. Any help would be appreciated. createPie : function (game, w, h) { console.log("create pie", w, h, this); var mask = game.add.bitmapData(w, w), bmd = game.add.bitmapData(w, w), canvas = bmd.canvas, context = bmd.ctx, size = 270, degreesToRadians = function (degrees) { return (degrees * Math.PI) / 180; }; var drawPie = function () { bmd.clear(); context.save(); var centerX = Math.floor(w / 2); var centerY = Math.floor(w / 2); var radius = Math.floor(w / 2); var startingAngle = degreesToRadians(270); var arcSize = degreesToRadians(size); var endingAngle = startingAngle + arcSize; context.beginPath(); context.moveTo(centerX, centerY); context.arc(centerX, centerY, radius, startingAngle, endingAngle, false); context.closePath(); context.fillStyle = 'rgba(0, 0, 0, 1)'; context.fill(); context.restore(); bmd.render(); }; drawPie(); game.cache.addBitmapData("loaderMaskBMD", bmd); var maskImage = game.add.image(348, 221, bmd); console.log("maskImage", maskImage); // doesn't work //game.cache.addImage("loaderMaskImage", maskImage); game.load.onFileComplete.add(function (progress) { console.log("load", progress); size = (360 / 100) * progress; drawPie(); }); // doesn't work //mask.alphaMask('preloaderRingLoaded', maskImage); // doesn't work //mask.alphaMask('preloaderRingLoaded', game.cache.getBitmapData("loaderMaskBMD")); // doesn't work //mask.alphaMask('preloaderRingLoaded', game.cache.getImage("loaderMaskImage")); var sp = game.add.sprite(348, 221, mask); sp.width = w; sp.height = h; console.log("sp", sp);},
  16. lucasdavidferrero

    The Canvas doesn't show sprites

    Hi community, I'm having a problem with canvas and sprites. I'm new in this matter and I hope that you could help me The problem, as the title says, is that I can't see the sprites on canvas. I've tried to call the functions preload() and create() manually in the browser's console and I get a warning that says: Phaser.Cache.getImage: Key "bg" not found in Cache. The warning appears for every Key that I'm using for. There is my code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Cat Catcher</title> <script src="./js/phaser.min.js"></script> <script> var game = new Phaser.Game(800, 600, Phaser.CANVAS, {preload: preload, create: create, update: update}); var cat, catcher, cursors, txtScore, score; function preload() { // load assets game.load.image('cat', '/img/cat.png'); game.load.image('catcher', '/img/cat.png'); game.load.image('bg', '/img/bg.png') } function create() { //setup game game.add.sprite(0, 0, 'bg'); catcher = game.add.sprite(400, 300, 'catcher'); catcher.anchor.setTo(.5,0); game.physics.enable(catcher, Phaser.Physics.ARCADE); cat = game.add.sprite( Math.random() * game.width, Math.random() * game.height, 'cat' ); game.physics.enable(cat, Phaser.Physics.ARCADE); score = 0; var style = { font: '20px Arial', fill: '#FFF' }; txtScore = game.add.text(10, 10, score.toString(), style); cursors = game.input.keyboard.createCursorKeys(); } function update() { //game loop code if(cursors.left.isDown){ catcher.x -= 5; catcher.scale.x = 1; } if(cursors.right.isDown) { catcher.x += 5; catcher.scale.x = -1; } if(cursors.up.isDown) { catcher.y -= 5; } if(cursors.down.isDown) { catcher.y += 5; } game.physics.arcade.overlap(catcher, cat, catHitHandler); } </script> </head> <body> </body> </html> I'm using Phaser v2.10.0 I wish you could tell me where the problem is, Thanks!
  17. Hi, I am trying to display only the text content which is there in pixi example port. Everything is working fine in all the browsers except safari. Earlier it was working fine but from past 2 days it is showing only the white screen. All the assets and sounds are loading in background and I am able to play the sound and all but there is no visibility. Is there any specific reason for this or am I missing something ?. I have added the example script also. Any help will be appreciated. Thanks in advance. var app = new PIXI.Application(800, 600, {backgroundColor: 0x1099bb}); var element = document.getElementById('gameCanvas'); element.appendChild(app.view); var basicText = new PIXI.Text('Basic text in pixi'); basicText.x = 30; basicText.y = 90; app.stage.addChild(basicText); var style = new PIXI.TextStyle({ fontFamily: 'Arial', fontSize: 36, fontStyle: 'italic', fontWeight: 'bold', fill: ['#ffffff', '#00ff99'], // gradient stroke: '#4a1850', strokeThickness: 5, dropShadow: true, dropShadowColor: '#000000', dropShadowBlur: 4, dropShadowAngle: Math.PI / 6, dropShadowDistance: 6, wordWrap: true, wordWrapWidth: 440 }); var richText = new PIXI.Text('Rich text with a lot of options and across multiple lines', style); richText.x = 30; richText.y = 180; app.stage.addChild(richText);
  18. I want to fill the color in specific tile. The method available in phaser is putTile(), But I want to fill any color I want. In canvas there is method called fillrect(). Please suggest me some solution.
  19. I have created a sample map using tiled software. Then tried to load the same u on webpage using phaser.js. But I am not getting the proper result. Is there any mistake in my code or something wrong with library. <!DOCTYPE html> <html> <head> <title>Basic Platformer game</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <script src="js/phaser.min.js"></script> <script src="js/phaser.js"></script> </head> <body> <div id="phaser-game"></div> <script type="text/javascript"> (function() { var game = new Phaser.Game( 800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render }); function preload() { game.load.tilemap('map', 'background.json', null, Phaser.Tilemap.TILED_JSON); game.load.image('tile2', 'floor2.png'); game.load.image('player','bot2.png'); } var map; var layer; var marker; var player; var currentTile; var cursors; var curser; function create() { game.stage.backgroundColor = '#787878'; game.physics.startSystem(Phaser.Physics.P2JS); map = game.add.tilemap('map'); map.addTilesetImage('floor2','tile2'); currentTile = map.getTile(0, 0); layer = map.createLayer('Tile Layer 1'); player = game.add.sprite(20, 20, 'player'); game.physics.p2.enable(player); player.body.fixedRotation = true; layer.resizeWorld(); marker = game.add.graphics(); marker.lineStyle(2, 0x000000, 1); marker.drawRect(0, 0, 20, 20); cursors = game.input.keyboard.createCursorKeys(); game.camera.follow(player, Phaser.Camera.FOLLOW_LOCKON, 0.1, 0.1); game.physics.arcade.enable(player); </script> </body> </html>
  20. Hello people ! I'm working on a project code in javascript without using any framework and I struggle with keyboard input. I would like to disable window (or document, I don't know the difference) keyboard detection while I'm in game, because the webpage move each time I use arrows keys to move my player. I already try to use getElementByID('myCanvas').onkeydown but it doesn't work at all ! Here a part of my code : /* In a class name Engine() */ document.onkeydown = checkKey; function checkKey(e) { var keysMap = { 37 : [-1,0], 38 : [0,-1], 39 : [1,0], 40 : [0,1], }; if(e.keyCode>=37 && e.keyCode<=40){ player.setSprite(player.spriteDict[e.keyCode]) game.moveTo(keysMap[e.keyCode][0],keysMap[e.keyCode][1]); } else if(e.keyCode == 82){ game.restart(); } else if (e.keyCode == 85){ game.undo(); } current.drawBoard(); } For more, see the project on Github https://github.com/KrankerApfel/Sokoban-Level-Generator
  21. tomfog

    Move world position on canvas

    Hi I have a newbie question that I feel silly asking but I couldn't find an example that demonstrated this yet. I have set the size of the canvas using the following code: var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'new-phaser-game', { preload: preload, create: create, update: update, render: render }); I have added a sprite that sits at the bottom of the screen full width (as expected) using the following: shapeMenu = game.add.sprite(0, 500, 'shapeMenu'); Now I would like to resize the world so that it sits inside this area with a margin around it (but inside the canvas). I have done this, but the world is sitting in the top left corner: game.world.setBounds(0, 0, 400, 400); Could any one advise on how I move this to the center of the screen (without moving the shapeMenu sprite as well)? Thanks!
  22. BigFax

    DrawImage problem adjacent sprite ?

    Hi, Context I'm building a 2D game from scratch in JS. I'm drawing the map by using rpgmxp tilesets for the moment just to have some resources : Each tile is 32*32 pixels. I'm using canvas API with ctx.drawImage method to display it : ctx.drawImage(tile.tilesetImg, tile.sX, tile.sY, this.tile.w, this.tile.h, canvasX, canvasY, Engine.Camera.tile.w, Engine.Camera.tile.h); I use different parameters for the image source size (this.tile.w & this.tile.h) and the image destination size (Engine.Camera.tile.w, Engine.Camera.tile.h). This has the effect of scaling the game, like that each user have the same map exactly displayed (32 tiles * 24 tiles). The current tile aspect ratio distortion doesn't matter to me for the moment. Check 1.png to see the result displayed to the player with a 4:3 ratio. Problem When I change window size if I don't keep the ratio 4:3 (because i display always 32 tiles * 24 tiles for the player) one of my tile types causes strange visual artifacts. This happens in chrome and firefox and probably all browsers. It's strange because all the other tiles are drawn from the same method, but do not exhibit this behavior. This behavior only seems to occur when the ratio is very different from 4:3. See 3.png to check what i'm talking about. There is some transparent lines which display the background at the right of each "bad" tile. Note this tile happens to be the first tile from the tileset (first image above). The same thing happens if height alone is changed, except the line will appear on the bottom instead. The thing which is again more strange is that if i change the tileset to draw a red line at the right of the first tile (check 4.png) the transparent line is replaced by the red line when drawing the map (check 5.png). Question From debugging (console.log), there doesn't apear to be any reason that tile source size would be 33px instead of 32px, but the artifacting effect makes it seem like this is the case. I appear to be using drawImage correctly by all accounts, so googled to see if this was a known problem. I was reading the w3 documentation https://www.w3.org/TR/2dcontext/#drawing-images-to-the-canvas when I found that : (especially the last note of part 12) Does this explain the problem ? Does any one know what the problem is more in detail ? Thank you in advance, best regards.
  23. Hi all, I am new to phaser so excuse me if this is stupid. Actually, I am working on agar.io kidda game. I am making a mini-map to hold all of the game world. But, the world inside the canvas moves along the player and shows beyond the actual game boundary. This function is called on create function. function createMiniMap(){ stage = game.make.bitmapData(game.world.width, game.world.height); thumbnail = game.add.bitmapData(200, 200); thumbContainer = game.add.sprite(game.width, game.height, thumbnail); thumbContainer.anchor.setTo(0.5, 0.5); game.stage.addChild(thumbContainer); } in update function update(){ if (game.time.time < this.nextUpdate){ return; } { stage.clear(); stage.drawFull(game.world); thumbnail.rect(0, 0, thumbnail.width, thumbnail.width, '#000'); thumbnail.copy(stage, 0, 0, stage.width, stage.height, 2, 2, thumbnail.width, thumbnail.width); thumbnail.update(); this.nextUpdate = game.time.time + this.updateRate; } } Thanks in advance!!!!!!
  24. Cyborg_Ean

    Character Customization Idea

    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.
  25. Hello, I have 2 sprite animations. Once first one is played, via below function I'm checking frame index (which frame is currently playing). When current frame is my desired frame, I want to play another sprite. animations.currentAnim.onUpdate Below is my full code: firstSprite.visible = true; firstSprite.animations.currentAnim.enableUpdate = true; firstSprite.animations.play('firstSprite', 14, false); firstSprite.animations.currentAnim.speed = 80; firstSprite.animations.currentAnim.onUpdate.add(function () { if(firstSprite.animations.currentAnim.frame > 5){ secondSprite.visible = true; secondSprite.animations.play('secondSprite', 30, false); secondSprite.animations.currentAnim.speed = 60; } }, this); On desktop in a browser it works perfectly, but on mobile devices it is being stucked and once frame is greater than 5 (if(firstSprite.animations.currentAnim.frame > 5){...}), then it stops at that frame and doesn't continue to play first sprite. Is there something I'm missing. Thanks