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

  1. I've gotten most of my game done, but I still have to make at least something that the player can do other that walk around the map and bump into things. I decided to add coins to collect, but I just have one problem: I've never added collectibles to a game before. Please help. I need to get this done in before next Friday. EDIT: I tried coding, but a coin wouldn't spawn anywhere other than the upper left corner. I tried setting its draw setting to this.randomRange, so it would spawn randomly on the map. Here's the 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, cash = new collectibles(), 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(); imgMoney = new Image(); imgSprite.src = "img/testroomImage.png"; imgSprite.addEventListener("load", init, false); imgPlayer.src = "img/temp.png"; imgPlayer.addEventListener("load", init, false); imgMoney.src = "img/coin.png"; imgMoney.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(); cash.update(); } function draw() { player1.draw(); cash.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 = 48; this.srcY = 1; this.width = 31; //how wide the sprite is in pixels this.height = 35; //how tall the sprite is in pixels this.drawX = 125; this.drawY = 50; this.moveX = 31; this.moveY = 35; this.centerX = this.drawX + (this.width / 2); this.centerY = this.drawY + (this.height / 2); this.speed = .60; 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,//draw specific specific points on x and y coordinates //newMoveX = this.moveX, //newMoveY = this.moveY; obstacleCollision = false; if (this.isUpKey) { newDrawY -= this.speed; //newMoveY -= this.speed; //this.moveY -= 35; this.srcX = 48; //Facing North this.srcY = 72; } else if (this.isDownKey) { newDrawY += this.speed; //newMoveY += this.speed; //this.moveY += 35; this.srcX = 48; //Facing South this.srcY = 1; } else if (this.isRightKey) { newDrawX += this.speed; //newMoveX += this.speed; //this.moveX += 31; this.srcX = 48; //Facing East this.srcY = 36; } else if (this.isLeftKey) { newDrawX -= this.speed; //newMoveX -= this.speed; //this.moveX -= 31; this.srcX = 48; //Facing West this.srcY = 108; } obstacleCollision = this.checkObstacleCollide(newDrawX, newDrawY); if (!obstacleCollision) { 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 tEdgeWidth = 512, tEdgeHeight = 10; var bEdgeWidth = 512, bEdgeHeight = 10; var rEdgeWidth = 1, rEdgeHeight = 512; var lEdgeWidth = 1, lEdgeHeight = 512; var bigFenceLeftSideWidth = 20, bigFenceLeftSideHeight = 304; var bigFenceRightSideWidth = 22, bigFenceRightSideHeight = 304; var bigFenceUpperLeftWidth = 160, bigFenceUpperLeftHeight = 30, bigFenceUpperRightWidth = 140, bigFenceUpperRightHeight = 30; var bigFenceLowerLeftWidth = 100, bigFenceLowerLeftHeight = 20, bigFenceLowerRightWidth = 195, bigFenceLowerRightHeight = 20; var smallFenceSideWidth = 4, smallFenceSideHeight = 80; var rockWidth = 34, rockHeight = 32; var smallInclineWidth = 89, smallInclineHeight = 42; var largeInclineRWidth = 153, largeInclineRHeight = 55; var largeInclineLWidth = 176, largeInclineLHeight = 58; var leftHoleWidth = 64, leftHoleHeight = 48; var rightHoleLongWidth = 113, rightHoleLongHeight = 48; var rightHoleTallWidth = 43, rightHoleTallHeight = 99; obstacles = [new Obstacle(10, 25, tEdgeWidth, tEdgeHeight), new Obstacle(10, 512, bEdgeWidth, bEdgeHeight), new Obstacle(499, 1, rEdgeWidth, rEdgeHeight), new Obstacle(14, 1, lEdgeWidth, lEdgeHeight), new Obstacle(2, 229, bigFenceLeftSideWidth, bigFenceLeftSideHeight), new Obstacle(320, 229, bigFenceRightSideWidth, bigFenceRightSideHeight), new Obstacle(10, 212, bigFenceUpperLeftWidth, bigFenceUpperLeftHeight), new Obstacle(200, 212, bigFenceUpperRightWidth, bigFenceUpperRightHeight), new Obstacle(15, 499, bigFenceLowerLeftWidth, bigFenceLowerLeftHeight), new Obstacle(144, 499, bigFenceLowerRightWidth, bigFenceLowerRightHeight), new Obstacle(90, 403, rockWidth, rockHeight), new Obstacle(184, 291, smallInclineWidth, smallInclineHeight), new Obstacle(15, 165, leftHoleWidth, leftHoleHeight), new Obstacle(258, 165, rightHoleLongWidth, rightHoleLongHeight), new Obstacle(335, 162, rightHoleTallWidth, rightHoleTallHeight), new Obstacle(97, 170, rockWidth, rockHeight), new Obstacle(73, 195, rockWidth, rockHeight), new Obstacle(0, 115, largeInclineLWidth, largeInclineLHeight), new Obstacle(192, 115, largeInclineRWidth, largeInclineRHeight), new Obstacle(120, 175, rockWidth, rockHeight), new Obstacle(215, 170, rockWidth, rockHeight), new Obstacle(233, 187, rockWidth, rockHeight), ]; } 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 collectibles () { this.srcX = 0; this.srcY = 0; this.width = 20; //how wide the sprite is in pixels this.height = 20; //how tall the sprite is in pixels this.drawX = randomRange; this.drawY = randomRange; this.centerX = this.drawX + (this.width / 2); this.centerY = this.drawY + (this.height / 2); } collectibles.prototype.update = function () { this.centerX = this.drawX + (this.width / 2); this.centerY = this.drawY + (this.height / 2); }; collectibles.prototype.draw = function () { ctxEntities.drawImage(imgMoney, this.srcX, this.srcY, this.width, this.height, this.drawX, this.drawY, this.width, this.height); }; function outOfBounds(a, x, y) { var newBottomY = y + a.height, newTopY = y, newRightX = x + a.width, newLeftX = x, edgeTop = 512, edgeBottom = 0, edgeRight = 512, edgeLeft = 0; return newBottomY > edgeBottom || newTopY < edgeTop || newRightX > edgeRight || newLeftX < edgeLeft; } What's wrong with it? just editing it in the slightest made the coin disappear when I refreshed the page.
  2. Hey Guys I am currently struggling significantly with a task, I have my canvas with 38 sprites in, which you pan across each is set up with these values; staffnum = 38; staffs[staffnum].name = "Dave"; staffs[staffnum].description = "Description: Dave is cool"; staffs[staffnum].title = "Title: Dave's Title" staffs[staffnum].image = "Images/TinyPNG/Dave.png"; staffs[staffnum].department = "Dave's Tech" staffs[staffnum].position.x = 23.3; staffs[staffnum].position.z = -0.2; staffs[staffnum].position.y = 5.65; staffs[staffnum].isPickable = true; staffs[staffnum].size = 3; I currently run through the array and can pull the data values for each.name .description and so on... with a mouse click, so when you click a sprite it opens a modal box in html over the top of the canvas with that image and the values pulled through and displayed, then you can close the box and return to canvas. The task I am trying to accomplish, is when my mouse cursor is hovering over someone, i want to display there .name and .title value that's being created in my js file through and display above the cursor so you can see who you are hovering over basically. I currently cannot find a way of completing this task, if anyone could make a simple playground, code pen, whatever platform with a small demo of this in affect that I could use to understand and then apply to my work? My build is seperated into multiple files currently so making a babylon playground isnt possible, but if need be i can provide a link to my build folder for download, THANKSSSS Mezz
  3. Hi everyone and welcome to the PIXI.js forum! First off, big thanks to @photonstorm for providing a place for people to talk Pixi, very kind of you sir! If you dont know what pixi.js is then let me give ya the low down: Pixi.js a fast, lightweight, open source 2D library that works across all devices. The Pixi renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of webGL. It's the fastest HTML5 renderer in town! The idea behind pixi.js is that it can be used as the rendering component in your game engine (or any other type of project!) rather than as a game engine itself. Questions / bug reports / amazing feature ideas, or anything at all Pixi, then this is the place to discuss it! I will also be posting updates here as the engine grows and evolves. Pixi.js can be found here along with lots of examples: https://github.com/GoodBoyDigital/pixi.js To find out more about Pixi and read our beginners tutorial, check out our blog over on Goodboy
  4. 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
  5. 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.
  6. 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?
  7. 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!
  8. 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
  9. 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); } };
  10. 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.
  11. 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?
  12. 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/
  13. 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.
  14. 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
  15. 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!
  16. 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.
  17. 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
  18. 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);},
  19. 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!
  20. 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.
  21. 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>
  22. 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
  23. 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!
  24. 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.
  25. 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!!!!!!