Search the Community

Showing results for tags 'Canvas'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

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

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Website URL


Twitter


Skype


Location


Interests

Found 344 results

  1. Hello, 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
  2. Barthandelus

    [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 :
  3. 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 :|
  4. 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
  5. 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.
  6. 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.
  7. tips4design

    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).
  8. 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
  9. 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?
  10. Rybar

    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
  11. 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!
  12. 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!
  13. Wizz

    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.
  14. 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?
  15. Nafroman

    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
  16. 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.
  17. Souleste

    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>
  18. 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?
  19. 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
  20. Valery

    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 ?
  21. Hi All, I am a JavaScript developer with more than 7+ years of experience on HTML5 game development, i can work on game development for multiple platforms. I can work on projects with limited timeline and budget, available for both part time and full time. Regards, Gideon
  22. Hello & Thanks , Still looking for *.js library that can be developed/run without 'local web server' . Can Phaser do this ? I read a tutorial that looked like this is possible . Thanks...Vern
  23. Hey, Everyone I'm dying making attempts to scale canvas for high dpi mobiles and get everything work correctly. Problem: When I start Phaser with 100% width/height for canvas it will be created according to css pixel size of device (window.innerWidth/innerHeight). So iPhone 6S for example, gets, 375x667 canvas, but in fact, of course it should be 2x bigger because devicePixelRatio is 2. Result, everything is blurry and not as expected. Ok, I decided to set width and height with devicePixelRatio included and then set CSS size of canvas to 100% of view port. let w = window.innerWidth * window.devicePixelRatio; let h = window.innerHeight * window.devicePixelRatio; let game = new Game(w, h) // And then in style sheet: canvas { width: 100vw !important; height: 100vh !important; } Now, it seems like everything looks perfect and as expected (is it correct way to do it?). But, another problem rises. Seems like after this events.onInputDown do not work correctly. When I click on sprite nothing happens, but in different location click handled. Seems like coordinates of input arena is messed up. Can someone help me this this?
  24. Hello! I'm trying to scale my game using custom CSS rather than ScaleManager (I have some specific dynamic scaling I'd like to do depending on the browser size and aspect ratio and it's just easier to do it using custom CSS). The problem is that even in NO_SCALE mode, when the browser is resized, the canvas inline style width/height values are always overridden with the game's default width and height. I can't seem to find a way to turn this off so that I can customize the canvas width/height myself. Any ideas?
  25. Morning! Just working on a bit of a debug console for my game, was just wondering if it was at all possible to switch the renderers at runtime? Have tried a couple of methods, but it just halts the code from executing I think (no error), but guessing it would be a nogo?