Search the Community

Showing results for tags 'css'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • 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


Last Updated

  • Start


Filter by number of...


  • Start



Website URL





Found 62 results

  2. I tried to change image quality in image-rendering css, but whenever i change the value it seems always pixelated. Because my image is not pixel art, i want the value of image-rendering to optimizeQuality or auto. So can melonjs achieve that? here is my css : image-rendering: optimizeQuality; image-rendering: -moz-crisp-edges; image-rendering: -o-crisp-edges; image-rendering: -webkit-optimize-contrast; image-rendering: opti mize-contrast; -ms-interpolation-mode: bicubic;
  3. Hello, i have got a question. I am created a gui simple button and also i want to take the button properties from CSS file. I tried so many things, but i couldn't reach my aim. I need helps from masters.
  4. Well... I want to learn how to make games, for PC, browser or mobile. I started to learn logic then I passed to HTML and CSS, I learned the basics of those two then I started to see the basic of JS. I did a break for a few months to focus on school, but now I'll return my programming studies. And I heard that C# is the best choice for gamedev using the Unity Engine. So, I want to know what is the best choice, stay learning JS or start to learn C#?
  7. Since Phaser is a web framework, we the developers, have a choice between drawing GUI (Menus, inventory screens, buttons etc) on the canvas or use built in browser elements with all the functionality and response and just connecting it to the game engine. What would you recommend? Drawing and handling clicks on canvas is a little harder, but if there are any sound benefits to that I would love to know. Thanks
  8. Hi all, I was trying to optimize our mobile experience, so instead of including a big background image in on of my texture sheets, I've made it into a simple .jpg image and set that as a CSS background with the following properties : body { margin: 0; padding: 0; background: url('assets/images/bg.jpg') no-repeat center center fixed; background-position: 50% 100%; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; height: 100%; overflow: hidden; } On iOS and desktop Chrome + Safari, the behaviour is as expected, but on Android Chrome, it seems to affect my Canvas size, as if the canvas was bigger than the whole screen. The weird thing is as I hit refresh multiple times, the behaviour changes from having correct canvas size to incorrect. If there is no way around that, I'm just going to go back to my background being part of my texture atlases. Thanks for any input! Edit: after playing around a bit with how I create Phaser's game object, I just realized that Android does not treat screen density like iOS does (ie. Retina vs xhdpi etc), so I basically added code so that on Android width and height are "100%" with a scale mode of RESIZE, and on iOS width and height are window.innerWidth * window.devicePixelRatio with a scale mode of SHOW_ALL and everything seems to behave correctly now. Let me know if you see any issues with my approach, thanks!
  9. Hey everyone! I wanted to get a bit of help getting a function working whereby when I hover my mouse over character sprites it will show a there name and title just above the mouse position for each different sprite, I'm unsure if I need to look at going down the route of a mouse hover/mouse over function or i need to create an event listener. If anyone could make a demo that I could play with and learn from or something that would be perfect! Thanks guys! Mezz
  10. Hi All! Do you have experience in HTML Game Developement? And the following skill set? JavaScript, JQuery HTML/HTML5 CSS/CSS3 Pixi JS / Spine JS Google Closure Active knowledge of English Send me a PM if you would like to know more details about this. Relocation is required and VISA is supported. Please don't contact me if you are selling services from company's. Only looking for people who are willing to move to Prague and have a full time contract with us.
  11. 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!
  12. 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() {, -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; } // 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;'left'); } // player presses right key else if (cursors.right.isDown) { player.body.velocity.x = 100;'right'); } // player presses up key else if (cursors.up.isDown) { player.body.velocity.y = -100;'up'); } // player presses down key else if (cursors.down.isDown) { player.body.velocity.y = 100;'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="" 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>
  13. Hello! This is no insurmountable problem on my end, but I am implementing Babylon as a lightbox with no iframe. In other words, my canvas has its CSS position property set to "fixed". This breaks the placement of the loading screen. Obviously I will patch it up on my end for now, but to make it work out of box, you could replace line 137 in with something like: var canvasPositioning = window.getComputedStyle(this._renderingCanvas).position; = (canvasPositioning == "fixed") ? "fixed" : "absolute"; I'm pretty sure that would have it working out of box in my case.
  16. Nexios

    Remove child

    So i am trying to orbit a small sphere around a bigger sphere like so: var orbit = new Sprite(loader.resources.RedB.texture); stage.addChild(orbit); orbit.anchor.set(0.1, 0.1); orbit.position.x= Gball.x*1.3; orbit.position.y = Gball.y/3; orbit.scale.set(0.15, 0.15); Gball.addChild(orbit); animate(); function animate() { requestAnimationFrame(animate); // just for fun, let's rotate mr Honeypot a little Gball.rotation -= 0.05; // render the container renderer.render(stage); } now the only problem is that when i click on the button to remove the child, but want him to keep the position he had in the animation: var ballX = orbit.x; var ballY = orbit.y; document.getElementById("bot").addEventListener("click", function () { var orbit = new Sprite(loader.resources.RedB.texture); stage.addChild(orbit); orbit.anchor.set(0.1, 0.1); orbit.position.x= ballX; orbit.position.y = ballY; orbit.scale.set(0.15, 0.15); Gball.removeChild(orbit); return false; }); does anyone know how i might be able to do that?
  18. I am a recent (about 4 months) user of Phaser, and have successfully built 4 games, not too complex. I have been struggling with putting up geometrical objects without making an image and loading that. The easiest way (that I know) to dynamically create the geometries I want (eg, rounded rectangle with dashed border) is a div with CSS styling specifying the border and position. This works from inside the javascript code fine, but then I cannot specify the Z-plane (to make it appear at all I need to do position:absolute and then it is always on top, and buttons beneath it do not get touch/click events) and I cannot enable drag. Is there a good solution for this within a Phaser game? If I can get this mix of CSS styling and sprites to work, there are a lot of things I could do with them. The attempt: objBack = document.createElement("div"); objBack.setAttribute("id", "objectBackground"); var xoff = WIDTH/2-obhalfx var yoff = HEIGHT-butLoc objBack.setAttribute("style", "position:absolute;float:center;left:"+xoff+"px;top:"+yoff+"px;color=#77ccff;width:800px;height:200px;border-radius: 5px 5px 5px 5px;-moz-border-radius: 5px 5px 5px 5px;-webkit-border-radius: 5px 5px 5px 5px;border: 2px dashed #8a888a;") var gameDiv = document.getElementById("game"); gameDiv.appendChild(objBack);
  19. Greetings, When adding CSS border-style or padding to the canvas element, I found that the hit zones of dragged objects shift off the sprite, presumably in proportion to the CSS values. Below code shows this error (FF & Chrome). For test.png I used a 100x100 square. If you try to drag the sprite while the mouse pointer is directly over it, it won't move. Move the pointer outside & to the left of the sprite & you'll be dragging it. Even with setting: this.scale.scaleMode = Phaser.ScaleManager.NO_SCALE; this.scale.pageAlignHorizontally = false; this issue still occurs. I came to this, because I wanted a border or side alley to the left & right of the game canvas in a different color. It seems Phaser hijacks the entire width & adding padding to wrapper divs showed up outside the entire width, not next to the canvas element. Anyone know a way to control the padding outside & to the left/right of the canvas element that Phaser creates? Thank You! <html> <head> <script src="assets/js/lib/phaser.js" type="text/javascript"></script> <script> window.onload = function () { var game = new Phaser.Game(768, 1024, Phaser.CANVAS, 'game', { preload: preload, create: create, update: update }); function preload() { console.log('Hey World');'test', 'assets/img/test.png'); } function create() { this.test =,, 'test'); this.test.anchor.setTo(0.5, 0.5); this.test.inputEnabled = true; this.test.input.enableDrag(); } function update() { } }; </script> <style> canvas { border-color: #ffffff; border-width: 3em; border-left-style: solid; border-right-style: solid; border-top-style: none; border-bottom-style: none; padding-left: 3em; padding-right: 3em; } </style> </head> <body> <div id='game-wrapper'><div id='game'></div></div> </body> </html>
  20. Hello all, i've seen some solutions for my problems, yet i still looking for some enhanced solution. I need my game to resize and it should not lose the screen proportions. however, i have every sort of screen to deal with, and some of them cuts off the bottom of my game. i am using it for resize: game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; game.scale.setScreenSize(true);#game { width: 100%;}Would be nice to find a way to make sure that there is enough height on screen so scale manager could respect that.
  21. Hello, A complete newbie here. So, I selected my project within 3 weeks as " Mario like game with level editor" for my college and can only use plain javascript and nothing else. I have done some research and i found that i have to make it on canvas. My logic was to first create a json data and render the map from that and make it playable. Then make an editor where the user can drag and drop tiles which after finished creates a json data, from which the game can render from. But, how do i start on this? Any guidance? How do i render the json and provide collision detection. Also, how to let user create their own level and create the json data. Help is much appreciated, Thank you!
  22. Hi Guys, I am new to interactive HTML5 stuff, so I'm hoping you good folks can help me with this. I'm no professional developer, but I am a professional audio editor. I have a little bit of experience with HTML code and javascript/c# and enjoy working on small projects as a sideline. To make my first interactive/game-like project a bit easier, I decided to try Google Web Designer. I had some problems with the first attempt, so this time, I coded the CSS content and some other bits myself. The problem I am stuck on now is where I want a spritesheet animation to change play direction with a click event. I recreated the problem in a small project: This is the outcome When Reverse is clicked, I created a function event which adds reverseplay="" to the element which is a boolean attribute. When I add this in the HTML, then run it, it works, it changes the direction of the animation. But when I change it dynamically, it doesn't work. So how do you guys work around this kind of screen/GUI update problem? To test if changing a different attribute works, I dynamically change loopcount="1" to loopcount="2", which works fine. So the Loop = 2 button makes the animation loop twice. I appreciate any help with this; If you need to know anything else about the project, just ask. Thanks
  23. scriptkid

    Pause Button

  24. scriptkid

    Multi Touch

    Soo... I am creating an android game for 2 players. Its made in JS , HTML5 , CSS Only thing that is mising is multi touch. Can someone type en exsample of a code for multi touch.
  25. Your tasks - Development of a smartphone application for iOS, Android and BlackBerry devices using a cross-platform frameworks and native programming in Objective-C and Java - Project management (if desired) Your profile - Excellent understanding of code and very good technical knowledge in the areas of web and mobile applications - Higher education with excellent achievement in computer science or very good practical experience - Experience in the field of web applications including MVC and JS frameworks are prerequisites - Web design with HTML5 and CSS3 skills are desirable - Project experience with native development (Android, iOS) or Ruby-onRails What we offer - Attractive paid full-time employment - Work in the center of Berlin, on a campus with 4 other startups at Humboldt University - Startup Culture: No hierarchies, early responsibility and cooperation on an equal footing between all employees - Open space: You get enough freedom to implement projects and tasks independently. We value new ideas - Product is live: Apps for iPhone and Android online since september - Skillful and motivated development team - English is working language Application Please send us your complete application documents (cover letter, curriculum, portfolio) and possible starting date via email. Contact us if you have any questions left. We look forward to meet you personally! Daniel de la Cuesta (CTO) Email: Phone: +49 (0) 30/220 137 330