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

  1. Today I got a headache from how... why... phaser3 handles the camera.setZoom(); - First thing I learned: all bodies need to be recalculated after .setZoom. - in WebGL works as expected. - in Canvas, Tilemaps are huge, the zoom isn't on point and even by recalculating the bodies, collision is way off. This could be reproduced by using this code and setting WebGL / Canvas. The code behaves differently depending on which you choose, and neither of both has a valid result. Am I missing something? Game config: // Game config type: Phaser.WEBGL, width: WIDTH, height: HEIGHT, scene: Level, resolution: 1, pixelArt: true, antialias: false, hidePhaser: true, roundPixels: true, backgroundColor: '161C22', zoom: 1, physics: { default: 'arcade', arcade: { gravity: { x: 0, y: 250 }, debug: true } }, tilemaps and camera: // Tilemap method setMap() { // # Add Tilemap this.config.map = this.make.tilemap({ key: 'map', tileWidth: 8, tileHeight: 8 }) const tileset = this.config.map.addTilesetImage('tilemap'); // # Add Tilemap Layers this.config.layers.background = this.config.map.createDynamicLayer(0, tileset); this.config.layers.midground = this.config.map.createDynamicLayer(1, tileset) this.config.layers.ground = this.config.map.createDynamicLayer(2, tileset); this.config.layers.forground = this.config.map.createDynamicLayer(3, tileset); this.config.layers.water = this.config.map.createDynamicLayer(4, tileset); // # Configure Tilemap Layers // replace with array of actual bodies this.config.layers.ground.setCollisionBetween([]); this.config.map.objects[0].objects.forEach((obj)=>{this.setMapObject(obj)}); // # Configure z indexes this.config.layers.background.setDepth(0); this.config.layers.midground.setDepth(1); this.config.layers.ground.setDepth(2); this.config.layers.objects.setDepth(3); this.config.layers.enemies.setDepth(4); this.config.layers.player.setDepth(5); this.config.layers.effects.setDepth(6); this.config.layers.water.setDepth(7); this.config.layers.forground.setDepth(8); this.config.layers.overlays.setDepth(9); this.config.layers.ui.setDepth(10); this.setTransition(); } // # Configure main camera const m = this.config.map; this.physics.world.setBounds(0, 0, m.widthInPixels, m.heightInPixels, true, true, true, true); this.cameras.main.setBounds(0, 0, m.widthInPixels, m.heightInPixels); this.cameras.main.setZoom(8); this.cameras.main.setRoundPixels(true); this.cameras.main.useBounds = false; this.config.layers.ground.setCollisionBetween(0, 8000); // add sprites this.config.player = new Player({ scene: this, x: 20, y: 30}); this.cameras.main.startFollow(this.config.player); this.physics.add.collider(this.config.player, this.config.layers.ground); Any thoughts, on this, would be helpful.
  2. Hello everyone! I'm trying to accomplish the following task: - When there is a change of state I want to take a screenshot of the canvas, show to the user while the state is changing. Now I read that I should use canvas.toDataURL to obtain the base64 encoded Image. I can't understand the steps to accomplish this task. 1) I save the URL with canvas.toDataURL(). 2) I should convert the base64 to an image right? 3) I should add the Image to the cache OR i Should do a load.image? 4) The operation should be async right? Because in my trying the debugger console is saying that the image hasn't been retrieved and I don't understand how I can make toDataURL (or the conversion from base64 to png) async because there are no methods. Thanks for the help!
  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. Rodrigo

    Sprite Tint on Canvas

    Hello, I'm seeing this behaviour that I can't understand, when applying a tint color to a sprite while using canvas as renderer. Right now for CORS reasons we're forced to use canvas in our app. I say this because in webgl the issue doesn't happen. The thing is the we're cutting images into stripes and applying a tint to each stripe, but this creates a line between the stripes: https://codepen.io/rhernando/pen/8fb06d28861d63ca5a6868f88c71f150?editors=0010 Just click the button to apply/remove the tint and you'll see the issue. Why this happens?, is there a way around this or is just what we get in canvas? Best, Rodrigo.
  5. How to make click Pixelperfect on Canvas DEMO + Tutorial https://leoche.github.io/Pixelperfect-Click-Canvas/ Summary There is no easy way to draw something and capture a pixel perfect click on it with HTML5 canvas. But there is a trick! We can attribute a random color to each Sprite we create then on a new blank buffer canvas, draw all sprites but only with their respective colors. Capture mouse input coordonates on real canvas then look the color of the pixel on the buffer canvas then compare this color with your sprites. If colors matches you clicked on this sprite! Tada! Real pixel perfect inputs! Initial Setup I took 3 sprites. So Basically here, we have a Main class which have an Array of Sprite(x, y, img) instances: this.sprites = [ new Sprite(100, 100, this.imgs.bed), new Sprite(52, 146, this.imgs.table), new Sprite(80, 135, this.imgs.z) ] I had to set coordonates to make those sprites overlaping each other The class for Sprites is pretty simple: export default class Sprite { constructor(x, y, img) { this.x = x this.y = y this.img = img } render (ctx) { ctx.drawImage(this.img, this.x, this.y) } } For this example i didn't add a z or depth property to Sprites, we admit in this example that Sprites ordering is made by their position in array. I set up a time loop to call render which call render on each Sprite: setInterval(() => this.render(), 1000 / 30) ... render () { ... this.sprites.forEach( sprite => { sprite.render(this.ctx) }) } Result: Real things coming up First we need to generate a random color for each sprites and make a new method to render the image but with only one Color. constructor(x, y, img) { this.x = x this.y = y this.img = img this.name = this.img.id.replace('img-', '') // Return 'bed', 'table' or 'z' this.id = Math.floor(Math.random()*16777215).toString(16); // Return a random HEX Color console.log("Created '" + this.name + "' with color #" + this.id); //We want here to see what color is generated for this sprite } Console returns Now we want to create a method renderColor with a canvas buffer, So we just need to create a canvas with img sizes, fill with generated color then drawImage with destination-atop composition. renderColor (ctx) { var buffer = document.createElement('canvas'); buffer.width = this.img.width; buffer.height = this.img.height; var bx = buffer.getContext('2d'); bx.fillStyle = '#' + this.id bx.fillRect(0,0,buffer.width,buffer.height); bx.globalCompositeOperation = "destination-atop"; bx.drawImage(this.img,0,0); ctx.drawImage(buffer, this.x, this.y) } For debug purposes we can now see the result if we update the render to render those colors sprites: render () { this.sprites.forEach( sprite => { sprite.render(this.ctx) sprite.renderColor(this.ctx) //DEBUG }) } Which give us this result: Create a global buffer for all this color sprites in Main constructor and render color sprites to it instead of the real canvas this.inputCanvas = document.createElement('canvas') this.inputCanvas.width = this.canvas.width this.inputCanvas.height = this.canvas.width this.inputCanvasCtx = this.inputCanvas.getContext('2d') ... render () { this.sprites.forEach( sprite => { sprite.render(this.ctx) // Previously: sprite.renderColor(this.ctx) sprite.renderColor(this.inputCanvasCtx) }) } then add an event listener to the real canvas and get pixel informations on the buffer canvas this.canvas.addEventListener('click', event => { let color = this.inputCanvasCtx.getImageData(event.layerX, event.layerY, 1, 1).data }) Convert the color data to HEX, and just compare with existing sprites! this.canvas.addEventListener('click', event => { let color = this.inputCanvasCtx.getImageData(event.layerX, event.layerY, 1, 1).data let hexColor = ("000000" + this.rgbToHex(color[0], color[1], color[2])).slice(-6) console.log('You just clicked on color #' + hexColor) let sprite = this.sprites.filter(sprite => sprite.id === hexColor) // You now have the sprite yea! }) ... // RGB Util rgbToHex(r, g, b) { if (r > 255 || g > 255 || b > 255) throw "Invalid color component" return ((r << 16) | (g << 8) | b).toString(16) } Console returns You now have your clicked Sprite! Thanks you guys for reading, hope this can help someone! Léo DESIGAUX Link to the Project Link to my Website Link to my Twitter Link to my Linkedin
  6. Which is the best way to paint the canvas with an input Fragment shader using BABYLON? Not a mesh but directly the canvas itself. I could set up an ortographic camera and a plane in front of it, but that's... just bad. Thanks in advance
  7. andrei.nicolae

    Zoom in on phone browsers

    Hi guys, I'm new to this and I have an issue in my current working project(it's first in phaser). I want to know how can I zoom in the game when it's opened in a mobile browser? The game is too small and I want to zoom and slide the whole canvas in the browser window. I can do this from outside the canvas but I cannot drag then from the canvas itself. Please help! Thank you.
  8. Hi everyone! With the help of Phaser 3 I introduce... Free Rider Jumps! This is using the facebook messenger platform. The first instant game by Kano . Available on desktop, and mobile . Its a single track. Goal is to get the best score you can. You earn points by going the distance and doing it with style by doing tricks! Mobile & Desktop on Messenger Search "Free Rider Jumps" or try http://m.me/freeriderjumps?game=freeriderjumps Desktop Only on FB https://www.facebook.com/instantgames/183911338963055/ Still some work to do on it, like music / sounds, but the bulk of what we wanted is there. Feel free to give feedback / ask questions.
  9. Olololz

    Pixi.JS / Pan & Zoom Canvas

    Hi, I'm using Pixi since several days on a game prototype which consists in a map made of tiles. The problem is that I got a big map (2000px / 2000px), so it don't fit a desktop screen, and not any mobile screen. I am looking for a way to allow the user to pan (i.e. navigating on the canvas with mouse drag and drops (for desktop) and with the finger (for mobile devices) zoom in / out the canvas Like in google maps for example Any idea of an embedded feature I can use? Thanks in advance for you answers.
  10. gtibo

    small games

    Hello, I'm currently making little games on codepen to teach myself how to bluid them and get better at it So i thought it could be nice if I post on this topic every time i make a new game for the feedbacks I'm using javascript and render graphics on canvas, and piskel for the spritesheets. 1/ Marble labyrinth Created JANUARY 23, 2017 tilt the screen with your mouse and move the sphere to the square, beware the holes in the ground. Link: http://codepen.io/Gthibaud/full/zNwgmZ/ 2/ The Dungeon Created FEBRUARY 07, 2017 walk through the dungeon, each time you enter a new room your score get higher. Link: http://codepen.io/Gthibaud/full/MJqgzv/ 3/ Copycat Created MARCH 30, 2017 This game is about cloned cats which you control at the same time Link: https://codepen.io/Gthibaud/full/ryQRYP/ 4/ Don't touch the spikes (clone) Created MAY 05, 2017 Link : https://codepen.io/Gthibaud/full/aWLjKL/ 5/ Taxi Apocalypse Created NOVEMBER 06, 2017 Link : https://codepen.io/Gthibaud/full/WXxMdb/ 6/ key Sprinter Created August 18, 2018 Link : https://codepen.io/Gthibaud/pen/eLOYem
  11. Hello, found this solution for creating video. but this result video is faster than runtime animation. thought that _alpha variable usage is strange, so tried milliseconds controls but not easy for me. in my opinion every 1000/fps milliseconds, to render and to capture are correct. but it makes more speedy video any advice? ps. i solved using CCapture. but video quality is not good. function record() { scene.getEngine().stopRenderLoop(); render() } function render() { requestAnimationFrame(function() { scene.render(); capturer.capture(scene.getEngine().getRenderingCanvas()); render(); }); }
  12. Pankaj Singh

    Html5 Game Developer

    Hi Guys, We have urgent requirement for Html5 Game Developer for Slot Game Technical Skills: • HTML5, createjs and Javascript expertise for Desktop/Mobile games • Canvas- programming (Multi Layer). • WebGL API for 3D graphics and animation. • Mobile events and device orientation. • Performance optimization techniques and run time performance improvements on mobile devices. • Ajax, Websockets & Web Workers, I/O, NodeJS and server-sent events. Kindly share your portfolio link and resume on this email- pankaj.singh@progaindia.com Thanks Pankaj Singh
  13. Nonostante Games

    BIOK - A strategy board game of conquests

    Hi, I'm so happy to introduce you BIOK! BRIEF DESCRIPTION BIOK is pure strategy and intuition. A board game for the ingenious and the acute minds. Lead the creatures on the playing field to capture monsters and all kinds of items. Watch the monsters’ eyes and guide them to their preys. KEY FEATURES - Simple controls and fluid mechanics, super simple to understand and fun to use - 60 levels in many worlds with various maps - 10 creatures with different characteristics and abilities - Bonus and survival mode to solve puzzles and challenges - Special objects and environmental elements - Secondary missions and hidden objectives iOS - AVAILABLE Get BIOK from the Apple App Store ANDROID/WINDOWS - BETA You can access the beta: BETA ACCESS (remember to use your google account) MORE ABOUT BIOK You can read more about on the official BIOK game page. FOLLOW US Send us any commend and advice. Help us to make a better game. Facebook | Twitter | Web
  14. Ciappa

    Framework or Canvas

    Hi, I'm new in the HTML5 game developing, and i want to know what framework or engine to use for my first 2d game. I want a framework that permit to get high-performance,or i should to use canvas? Maybe,could you link to me some tutorials about thet framework? Thank. Sorry for my english,I don't know well english
  15. 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
  16. 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
  17. 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?
  18. 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.
  19. 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.
  20. 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
  21. 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
  22. 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
  23. 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.
  24. 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?
  25. 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!