Search the Community

Showing results for tags 'Canvas'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • HTML5 Game Coding
    • News
    • Game Showcase
    • Coding and Game Design
  • Frameworks
    • Phaser
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Found 304 results

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

    Hi, I'm a actually making a game using PHASER. On this game, player have to jump to escape balls rolling on the ground, like on an infinite runner. Actually, everything is working fine but the player is showed using a spritesheet divided on 128*128 resolution. The character animation running doesn't use 128 pixels on width causing the ball to collide with the player even if the player doesn't hit the ball. The player hitbox is actually configured to 128*128 but I know that in previous versions of PHASER, it was possible to render player to make his hitbox scale his skin. I didn't find this function in the actual version of PHASER. Can someone help ? Thanx in advance. For information : Phaser example on previous versions :
  4. is there a gradient tint in phaser?

    is there any way to do a gradient tint in sprites/images in phaser? i'm using canvas mode , not auto or webGL Thanks. Sorry, for bad english :|
  5. Hello, I am creating a tilesprite, but its causing black lines to appear right at edges, i have ensured that when used as just sprite there is no black line, i have tried adding extra padding in texture packer didnt, work, tried making the tilesprite size in PoT didnt work. Can anyone suggest anything else I can do? Thanks
  6. Hello, I'm creating my first mobile game via Phaser framework and canvas. So for creating the channel (please check attached screenshot of my spiral channel) I imported my sprite into Physics Editor program, did what is described in this tutorial. Now trying to prepare the part when user will press/touch the ball holder, after touch/press the ball should rotate around the channel and depending on the speed it should fall into holes. Did some research but can't find any example on how I can make the ball move around the channel. Any ideas will be appreciated. I have following code for loading spiral sprite and its json file: preload: function() { game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; game.load.image("spiral", "assets/images/pinball-channel.png"); game.load.image("ballHolder", "assets/images/ball-holder.png"); game.load.image("ball", "assets/images/ball.png"); game.load.physics("physicsData", "assets/sprite_physics.json"); }, create: function() { var ballHolderGraphic; ballHolderGraphic = game.add.sprite(196.5, game.height-98, 'ballHolder'); ballHolderGraphic.width = 60; ballHolderGraphic.height = 104; ballGraphic = game.add.sprite(213, game.height-ballHolderGraphic.height-23, 'ball'); ballGraphic.width = 28; ballGraphic.height = 28; var channel; game.physics.startSystem(Phaser.Physics.P2JS); channel = game.add.sprite(225, 365, 'spiral'); channel.width = 400; channel.height = 550; game.physics.p2.enable(channel, false); channel.body.clearShapes(); channel.body.loadPolygon('physicsData', 'spiral'); } Also I have one issue, after this line (channel.body.loadPolygon('physicsData', 'spiral');) nothing (image, button,etc...) is being displayed in the screen but once I add them before this channel part, it works perfectly. Any ideas why? Thanks
  7. Hi, I have a problem with a phaser android game, build with Phonegap, in the android 4.4.2 version, the canvas is showed in the middle of the phone screen, showing the rest of the screen in black. You can move this canvas to position 0,0 after the screen is showed. In other android versions this does not happen. The game is shown in landscape mode, but in portrait mode the same thing happens. I add a screenshot of the game to show this problem. I appreciate any help. The android game is published in https://play.google.com/store/apps/details?id=com.phonegap.WackTrump. Thanks in advance. Greetings.
  8. Hi! I've got a new HTML5 Game for sale called Ninja Surudo. Check it out: Contact me to discuss on the type of license, price and other details. You can e-mail met at : [[[ jtdispagma {at) gmail (dot} com ]]] You can also PM me if you want.
  9. Mask out parts of an image?

    I have a layer (displayobject) with multiple sprites inside. I want to add a circular explosion that would remove the parts of the object they overlap. So, after adding the explosion circle the current display object should. Attached is a picture of what I want to achieve. I know that I could use a black & white mask, where everything is white and the explosion is black so it's masked, but this means creating a new bitmap as large as the entire canvas just to draw a tiny cutout and this would have to be done for each explosion. Also, new sprites might be added after the explosion occurred, so the new items shouldn't be masked by old explosions. The issue is that the background is a texture, not a solid color. If it was only a color I could have simply added a new circle with the background color over the shapes and it will look like a cutout. I think a WebGL solution such as using shaders might be used. Question 1: Can we add a mask in PIXI that says: "hey, keep everything from the original image EXCEPT for the pixels of this mask" ? Question 2: Do you have a better idea of how to create an explosion that removes parts of sprites that already exist and allow for new sprites to be placed over the explosion? What's the most efficient way to implement this? PS: The sprites are actually meshes, I tried converting them to bitmap using .cacheAsBitmap on the mesh, but it seems to be buggy (the quality drastically drops and the entire mesh is actually displaced by several pixels when it is cached as a bitmap).
  10. I do have a game project made in PIXIJS HTML5. Currently I'm using Cocoon.io Canvas+ View for rendering. However It does have some bugs in old devices using PIXI 4.3 WebGL with Cocoon.io Canvas+. Is there another HTML5 accelerated Canvas good for games like Cocoon.io one? Thanks
  11. 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
  12. Hi guys. How do I use javascript to create multiple canvases so that I can create 9 different scenes all running at the same time?
  13. Hi all, just polishing off another pixi based game. Another one for mobile, so looking now to see if we can scale back some of the effects when using canvas for the lower end devices. I'll be dropping out particle effects, and a lot of the animations as it's rendering a bit slow atm, but one issue I've come across is with spine meshes. To save load time I've designed some assets to be flipped, but have noticed the mesh wireframes are visible on all those that are flipped. eg. grave.scale.set(-1,1); This is only visible on canvas (webGL is perfectly fine). Anyone know if there is a quick fix for this, or reckon I will have to duplicate the spine elements and flip the assets? (Last resort really) Thanks in advance!
  14. Hey Guys! I have a question! I wanted to know if there is a way that when you click on a sprite can you set the css value for display to none for all other sprites - so essentially, when one sprite is clicked(chosen) all others display:none the chosen is set to display:block. I'm going for the effect of click on one character and it hides the others so you see your selected character and there bio(name, description etc...) appears next to them as display: block whereas all others are display: none. I am struggling as I can't call the sprite elements within the canvas by flat css - so was wandering if and how it is possible to achieve my hoped functionality! This might be something for you @Wingnut? Thankss! Mezz out!
  15. Greeble, a #js13k entry

    Hello everyone! Last week I finished my #js13k entry, Greeble. I'd love it if you guys could give it a play and let me know what you think. http://js13kgames.com/entries/greeble
  16. Game with AJAX->PHP

    I'm new to game development. I want to create a game that is decided on the server side with PHP. The graphics will be shown using Canvas and I would hope that some graphics would be used from Illustrator. I need to know if the pixi.js framework can be used to communicate via AJAX to represent different graphics through user interaction. Example. User makes a decision -> values are calculated on the server side -> sent back and represented with graphics. Is this possible? I took a glimpse at the documentation and searched for AJAX but found nothing.
  17. Hi there, everytime I have to make a game that pauses when the canvas loses the focus (jquery blur()) I struggle with lines and lines of stupid lines of javascript and I´m pretty sure there´s something simpler than my way to do that. I have a normal sprite on the game that pauses/unpauses the game, and I would like to do exactly the same when the canvas focus/blur... how do you guys handle this?
  18. Less lag in video panning

    https://jsfiddle.net/y0tk7mk8/ - is my code so far I am wondering is there a way that would cause less lag when the mouse moves left, right, up, down, etc . Also is there a where that when the mouse goes out side of the canvas to keep on panning to show the whole video
  19. Hi everybody: I need to know about what is the preferred approach to handle the mouse/touch events (for example onclick): (1) via the canvas by means of myCanvas.addEventListener("pointerdown", function (evt) { ... var pickInfo=myScene.pick(myScene.pointerX,myScene.pointerY,function(mesh){ return (mesh===myMesh); }); if(pickInfo.hit){ alert("Mesh picked"); } }); (2) via the mesh using the powerful ActionManager functionality myMesh.actionManager.registerAction(new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPickDownTrigger,function(evt){ alert("Mesh picked"); })); Thank you for your time.
  20. Player and Colliding Objects

    Hi, I need some help with my code, I am trying to create a fenced in area for my character to go in, but he cannot fit through because of the objects that he collides with. How do I change the area that the character collides with? can I reduce the size of the collidable area? The hole in the fence seems quite large enough, but he just won't go through. My game.js // variables for items, walls, etc. var walls; var house; var game = new Phaser.Game(550, 540, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render }); //add house to game function addHouse(image) { house = game.add.physicsGroup(); house.create(-250, -240, 'greenhouse'); house.setAll('body.immovable', true); } // add fences/walls to the game function addWalls(image) { walls = game.add.physicsGroup(); // fences up top walls.create(-90, -200, 'fencefront'); walls.create(5, -200, 'fencefront'); walls.create(100, -200, 'fencefront'); walls.create(195, -200, 'fencefront'); // fences to right walls.create(288, -200, 'fenceright'); walls.create(288, -135, 'fenceright'); walls.create(288, -70, 'fenceright'); walls.create(288, -5, 'fenceright'); // fences at bottom walls.create(-90, 59, 'fencefront'); walls.create(5, 59, 'fencefront'); walls.create(100, 59, 'fencefront'); walls.create(195, 59, 'fencefront'); // fences to left walls.create(-91, -200, 'fenceright'); walls.create(-91, -135, 'fenceright'); walls.create(-91, -70, 'fenceright'); // set the walls to be static walls.setAll('body.immovable', true); } // preload items, walls, players, etc. function preload() { // preload player game.load.spritesheet('player', 'hero.png', 64, 64); // preload houses game.load.image('greenhouse', 'greenhouse.png'); // preload fences game.load.image('fencefront', 'fencefront.png'); game.load.image('fenceleft', 'fenceleft.png'); game.load.image('fenceright', 'fenceright.png'); } // variables for character var cursors; var player; var left; var right; var up; var down; // add what will be in game function create() { game.world.setBounds(-250, -250, 550, 550); // set background color game.stage.backgroundColor = ('#3c6f42'); // add player image and place in screen player = game.add.sprite(-232, -100, 'player', 1); player.smoothed = false; player.scale.set(1); // player will "collide" with certain images like walls and houses player.collideWorldBounds = true; // ANIMATION FOR PLAYER CONTROLS down = player.animations.add('down', [0,1,2,3], 10, true); left = player.animations.add('left', [4,5,6,7], 10, true); right = player.animations.add('right', [8,9,10,11], 10, true); up = player.animations.add('up', [12,13,14,15], 10, true); // enable physics in the game (can't go through walls, gravity, etc.) game.physics.enable(player, Phaser.Physics.ARCADE); game.physics.startSystem(Phaser.Physics.P2JS); game.physics.p2.enable(player); // make sure to add this code to add items/walls/buildings addHouse(); addWalls(); // enable keyboard arrows for controls cursors = game.input.keyboard.createCursorKeys(); // camera will follow the character game.camera.follow(player); } // what happens when player does something function update() { // player will now collide with these images rather than pass over them game.physics.arcade.collide(player, house); game.physics.arcade.collide(player, walls); // PLAYER CONTROLS player.body.velocity.set(0); // player presses left key if (cursors.left.isDown) { player.body.velocity.x = -100; player.play('left'); } // player presses right key else if (cursors.right.isDown) { player.body.velocity.x = 100; player.play('right'); } // player presses up key else if (cursors.up.isDown) { player.body.velocity.y = -100; player.play('up'); } // player presses down key else if (cursors.down.isDown) { player.body.velocity.y = 100; player.play('down'); } // player does not press anything else { player.animations.stop(); } } function render() { } The HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Simple Canvas Game</title> <link href="https://fonts.googleapis.com/css?family=Syncopate:700" rel="stylesheet"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> html { background: black } canvas { margin: auto; } h1 { font-family: 'Syncopate', sans-serif; color: rgb(194, 68, 91); text-align: center; margin: 0 auto; font-size: 25px; } </style> </head> <body> <header> <h1>Crafty Heroes</h1> </header> <script src="phaser.js"></script> <script src="game.js"></script> </body> </html>
  21. On mobile, when you want to scroll the page, you drag screen with one finger. However, when your finger is on canvas, you can't drag the page. If a canvas covers whole screen, there is no way to scroll the page. Is there a way to enable scrolling-dragging if canvas element is under the finger?
  22. Hi, On Firefox the camera stops rotating when your pointer leaves the canvas: http://playground.babylonjs.com/ Which doesn't happen on Edge, IE, Chrome or Opera
  23. 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.
  24. When Canvas better WebGL

    Hi, On some Android devices canvas renderer works better and stable than Web GL Some games may crash in Web GL mode when in canvas mode all games stable. I want to ask is there any way how can we detect it ? Maybe some benchmarks exist ?