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

  1. I'm sorry for making the title that long....and also my content will be... Recently I'm quite tortured by a tricky problem, mainly on iOS mobile, things are like this... I inserted a Babylonjs project into a third-party homepage through iframe tags. As you know, the home page has header, footer, another content and the iframe part. When I scroll to the iframe part, and want to interact with the canvas, as long as I tap the canvas, the page jumps to the bottom immediately. Strange! I scroll back, and continue to pinch, rotate the canvas, it goes normally (do not touch other part, only the canvas after jumping). As long as I have tapped the UI, and then tap the canvas, history will happen again. I tried other projects (also build with Babylonjs), some will not have this problem. So I made a detailed comparison, excluding the potential problem raised by html ,css. The main difference might be the version of Babylon.js. The ones that have jumping problems use the babylon.3.1.1.min VERSION , while those don't have problem, use this Version , it's compressed and I forgot the version now. Can anybody tell which version the latter is? and what's difference between them, especially about issues like canvas focus, tapping event on iOS... The test link that having the problem is this , the visit speed might be slow out of China. But the problem will be like what I mentioned above. I guess it's something about canvas.focus(). but not sure..I know you guys are more experienced and smarter. I would really appreciate!!!!!!!! 5e2233d9ce8a56b9700997ac243d5838 (1).mp4
  2. Good day folks! Im completely brand new to Babylon (3D site building in general) and have become an instant fan! Im having a few issues and would like to see if folks can help: 1. I want to have 4 boxes on my site and align 2 on the right and 2 on the left (Such as the "Fashion Show" demo on the main page), how to go about doing this? 2. I want to make my logo and place it between the boxes, any recommendations on how to make this happen? 3. Also I want to place images on the boxes and link them to another site when a person clicks them, how do an ahref in this type enviorment? 4. I would like to change the canvas to black, how to do this? Thank you for all your help💋 Meka
  3. Mat Groves

    Pixi.js Showcase

    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/
  4. Hi, I made a web-app for planning and visualizing time segments. It looks like this in action: napchart gif2.mp4 I do all the calculations in pure Javascript, and had to write a lot of code to code all the shapes make hit detection work for all shapes. I am drawing all elements in HTML5 canvas. I am looking into refactoring the codebase and adding more features. In that case I am wondering if a library rendering to WebGL would help me? Things I want: Easy way to prevent text overlapping Easy way to add small animations and slick effects Smooth animations with more complex and advanced shapes than in the video. The bottleneck is when animating the shape, and then the JS have to calculate all elements every frame, but would WebGL help with that? This is a non-trivial usecase, and I think it may be best to just use pure JS and canvas, but to be honest, I don't really know how WebGL works, and in what way it helps. Any WebGL heads here?
  5. The Issue Text object is getting cut-off / cropped at the top and sometimes on the bottom, when using a custom font with a narrow width. (screenshot attached) The fonts in question work correctly in every other environment, and even work with HTML canvas and the regular getContext method of adding text. So i'm fairly positive the issue is isolated to Phaser using HTML canvas. Possible Cause I think issue is most likely happening due to the way Phaser/PIXI calculates the height of text from the width of letters. Possibly using the width of the widest letter and assuming the height? I tried to work out what the source code is doing. Current Workaround The only workaround i've found is rebuilding the font and adding a wide margin to each letter (so the letter boundaries are more 'square'), then in Phaser splitting a Text object into individual Text objects for letters and calculating their position based on letter width, and manually subtracting a value to change the letter spacing. But even splitting and repositioning doesn't work that well (with any font, not just thin fonts) i have to calculate separate margins for even thinner letters like 'I', 'i', or 'l', or wide letters like 'm' and 'w'. I would rather not use BitmapText as i need to use different font sizes. Solutions Has anybody else encountered this issue? Found a solution or a better work-around? Thanks.
  6. Thunderfist

    making collectibles in canvas game

    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.
  7. Mezzorio

    Difficult Task

    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
  8. Mat Groves

    Welcome to the Pixi.js forum

    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
  9. 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
  10. 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.
  11. 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?
  12. 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!
  13. 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
  14. 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); } };
  15. 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.
  16. 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?
  17. Shex

    Image is pixelated

    Hi I'm trying to run my game on a mobile device with the Phaser 3 framework and sprites are rendered as very pixelated images. I'm running the game through the Facebook web player. I'm using a Samsung Galaxy S6 device which the resolution is 1440x2560 with a device pixel ratio of 4. I have setup the same configuration on my PC through the Chrome mobile debug view (1440/2560 with pixel ratio of 4) and the images look way better. I have attached two screenshot of the PC (good) and mobile (bad) devices to show the difference. The game is rendered as CANVAS and I'm using the window.innerWidth and window.innerHeight to define the sizes. Does anyone have any insight about what's going on?
  18. 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/
  19. 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.
  20. 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
  21. 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!
  22. 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.
  23. 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
  24. 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);},
  25. 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!