Search the Community

Showing results for tags 'HTML'.

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

  1. I am creating a game in phaser 3 where I need to work with texture atlas. There are no useful tutorial available online and I have no idea how to even start. So here are my questions. 1) How to load a JSON atlas and draw images from it? 2) How to randomly select a texture from the atlas and draw it? Note : While packing my textures I selected JSON array option. Some tutorials which I found online. LoadingTextures RandomTexture AddingAtlas
  2. Hello everyone. I have built a game using Phaser. On game over, the players high score is recorded in a variable (this.inputScore). To submit their high score to the server, the player clicks a button that takes them to an Index.html page where there is a form they fill in. To avoid cheating, I want the high score variable to be passed from the game's JavaScript file (Game.js) to an input value on the form as a read only value. I have created a function (assignValue) inside the Game.js file to execute this task, but because of it's scope I cannot get the function to be read by the Index.html file. When I place the function at the top of the Game.js script (globally) the Index.html reads the function and executes it accordingly (but with a hard-coded value for testing purposes.) How can I get the Index.html file to read my assignValue() function and pass this.inputScore to the input value in Index.html? Any help would be greatly appreciated - still learning. Thanks. Game.js file: //INDEX.HTML READS THE assignValue function BELOW (WITH A HARD CODED VALUE FOR TESTING) AND //APPLIES IT BECAUSE IT IS IN GLOBAL SCOPE. BUT I NEED THE VALUE TO BE A VARIABLE TAKEN FROM THE //assignValue FUNCTION INSIDE THE GAME CODE. SEE GAME CODE BELOW: function assignValue() { document.getElementById("inputScore").value = 127; }; //GAME CODE var CrystalRunner = CrystalRunner || {}; CrystalRunner.GameState = { init: function() { //...code here }, create: function() { //...code here }, update: function() { //..code here //check if the player needs to die if( >= && this.counter === 0 || this.player.left <= 0 && this.counter === 0) { this.gameOver(); } }, gameOver: function(){; this.player.body.enable = false; //..code here this.updateHighscore(); //..code here }, updateHighscore: function(){ this.highScore = +localStorage.getItem('highScore'); if(this.highScore < this.myScore){ this.highScore = this.myScore; this.inputScore = this.highScore; this.congrats =,, 'congrats'); this.congrats.inputEnabled = true; this.congrats.fixedToCamera = true; this.submitScoreButton =,, 'submitScoreButton'); this.submitScoreButton.inputEnabled = true; this.submitScoreButton.fixedToCamera = true; { window.location.href = "index1.php"; }, this); } localStorage.setItem('highScore', this.highScore); }, //THE FUNCTION BELOW IS NOT BEING READ BECAUSE OF SCOPE. HOW TO I MAKE INDEX.HTML READ IT? assignValue: function() { document.getElementById("inputScore").value = this.inputScore; }, }; Index.html file: <?php require_once 'dbconnect.php'; ?> <!DOCTYPE html> <html lang="en"> <head> <title>Crystal Candy Game Login</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"/> <link href="css/style.css" rel="stylesheet"> <script type='text/javascript' src='js/jquery-2.2.3.min.js'></script> <script> $(window).on('load', function() { $('#status').fadeOut(); $('#preloader').delay(350).fadeOut('slow'); $('body').delay(350).css({'overflow':'visible'}); }) </script> </head> <body onload="assignValue()" class="bg"> <div id="preloader"> <div id="status">&nbsp;</div> </div> <div class="wrapper"> <div class="texte"> <header> <h1>SUBMIT YOUR SCORE</h1> <img id="logo" src="assets/images/logo.png"> </header> <p>Submit your highscore and you could stand a chance to win a prize!</p> </div> <div id="main"> <form id="form-style" method="post" action="crystalhandle.php" autocomplete="off"> <div class="form-group"> <label class="header-text"><span>First Name</span></label> <input class="form-control" type="text" id="name" name="username" placeholder="Name" title="Please enter your Firstname" required=""> </div> <div class="form-group"> <label class="header-text"><span>Surname</span></label> <input class="form-control" type="text" id="name" name="surname" placeholder="Surname" title="Please enter your Lastname" required=""> </div> <div class="form-group"> <label class="header-text"><span>Email</span></label> <input class="form-control" type="email" id="email" name="email" placeholder="" title="Please enter a Valid Email Address" required=""> </div> <div class="form-group"> <label class="header-text"><span>Phone</span></label> <input class="form-control" type="tel" id="name" name="phone" placeholder="Phone" title="Please enter your Phone No" required=""> </div> <div class="form-group"> <label class="header-text"><span>Score</span></label> <input class="form-control" type="tel" id="inputScore" name="score" value="" readonly> </div> <!-- I need the above input value to have the variable from assignValue inserted into it--> <div class="w3ls-btn form-group"> <div class="wthreesubmitaits"> <input type="submit" name="signup" id="reg" class="button" id="next1" value="Send" style="font-family: sans-serif; font-size: 17px; font-weight: bold;" </div> </div> </form> </div> </div> <script type="text/javascript" src="js/phaser.min.js"></script> <!--the below js file is where assignValue() is defined:--> <script type="text/javascript" src="js/states/Game.js"/></script> </body> </html>
  3. I want to able to render fractions (e.g. 1/4, 2/3, 3/8, 3/2) in my game that the player can drag to a line. I'm wanting more fractions than the typical ones, e.g. 5/2, and I'm wanting to be able to generate them from within phaser. Anyone got a good idea of maybe how to do this. Was wondering about using an html file as that would give me super and sub scripts, but that would require a file for each fraction. Thanks, Gordon
  4. If you haven't yet seen A-Frame yet, you should check it out. The gist is that you use HTML tags to define your scene. I was working on porting A-Frame to Vue because the devtools are amazing and the components are expressive and makes your app really reactive. I prefer Vue over React since it's simpler and I don't have to work in JSX. While working on integration with A-Frame I started to notice that the overlap between A-Frame's entities and Vue's components became rather cumbersome and Three.js's API and documentation made the situation worse. I noticed the Babylon.js project shortly after and discovered how awesome it is. I then decided it would be better to make my own ECS using Babylon.js with Vue components. As of right now I have Scene, Entity, Mesh, Light, and Animation components created. Here's a sneak peek: And the code for the scene written in Pug: I'll keep this thread updated as I continue progressing on the project. Let me know if you have any ideas or feedback. You can watch me code it on my Twitch stream this Monday from 2-10pm CST. I just started this project a couple days ago, so it doesn't have documentation yet, but you can see the code on Github or grab it off of NPM as vue-babylonjs
  5. 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: 2/ The Dungeon Created FEBRUARY 07, 2017 walk through the dungeon, each time you enter a new room your score get higher. Link: 3/ Copycat Created MARCH 30, 2017 This game is about cloned cats which you control at the same time Link: 4/ Don't touch the spikes (clone) Created MAY 05, 2017 Link : 5/ Taxi Apocalypse Created NOVEMBER 06, 2017 Link : 6/ key Sprinter Created August 18, 2018 Link :
  6. Hi, I'm an animator and I have no knowledge regarding coding and programming. recently our parent company (game developer) told us we could use pixie particles online editor for creating particles in HTML5 games and the asked us to go to the "" and create an emitter so they could use that particle in our designs. I realized it would be better if I could make an HTML file to preview the particle. a very simple animation to send the particle spawning point around a square. like this the problem is, the deeper I go the darker it gets!!! the problem is I don't even know what I have to learn before attempting to make it work!!! is it HTML? is it java? do you call it Scripting ??? is the place to go to get information? so far I think I need to create a server? install Pixi js (i don't know how) install npm ?? (I don't know why?) this is very confusing write know
  7. Hey all, I want to resize an element but not as often as I currently do it. Right now I have a project with an html element that gets resized on every frame and it runs on every update. game.gui.TextArea = me.Renderable.extend({ init: function() { this.textarea = document.createElement('textarea'); = 'textHistory'; this.textarea.readOnly = "true"; this.textarea.disabled = "true";; }, update: function() { videoPos =; = 'width:' + (window.innerWidth - videoPos.width) + 'px; height:' + videoPos.height + 'px;'; } }); I'm concerned about this, this code will run way more often than it needs. Not sure about the performance impact but it only needs to run when the window size is updated. Is there a way I can piggyback on any melonjs functions that resize the canvas and only run it then?
  8. Hello! I'm find the perfect animation example but it works only on one image and in default mode (autoplay on page load). I need to init this only on mouseenter event and for each current image. This is example in codepen I'm found contidion to mouseenter and mouseleave event if ( options.interactionEvent === 'hover' || options.interactionEvent === 'both' ) { slidesContainer.pointerover = function( mouseData ){ mouseX =; mouseY =; displacementFilter.scale, 6, { x: "+=" + Math.sin( mouseX ) * 100 + "", y: "+=" + Math.cos( mouseY ) * 100 + "" }); rotateSpite(); }; slidesContainer.pointerout = function( mouseData ){ displacementFilter.scale, 1, { x: 0, y: 0 }); cancelAnimationFrame( rafID ); }; } The default animation settings is: if ( options.autoPlay === true ) { var ticker = new PIXI.ticker.Ticker(); ticker.autoStart = options.autoPlay; ticker.add(function( delta ) { displacementSprite.x += options.autoPlaySpeed[0] * delta; displacementSprite.y += options.autoPlaySpeed[1]; renderer.render( stage ); }); } I thought I can do something like this if ( options.interactionEvent === 'hover' || options.interactionEvent === 'both' ) { var ticker = new PIXI.ticker.Ticker(); ticker.autoStart = options.autoPlay; ticker.add(function( delta ) { displacementSprite.x += options.autoPlaySpeed[0] * delta; displacementSprite.y += options.autoPlaySpeed[1]; renderer.render( stage ); }); } This is pen with that "changed" part Also I need to load all items, but loads only one item. Why? Thanks
  9. 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
  10. We're looking for devs to participate in testing our playable content creation platform. Here are some details on the features and benefits: Using our library of existing game assets or starting from scratch, game devs can easily build and customize playables to attract ready-to-pay/play users through highly engaging and fun interactive experiences. Custom playables are instantly published and can be distributed across any website/network/app to engage and acquire new, high LTV users. If you're interested in participating, please respond to this thread or email me at
  11. Hello, I'm a web programmer with 3 years of experience (currently a senior developer). I've always been a fan of videogames and now I'm starting learning game development just for fun. Like in any type of development , you always face problems and learn of those. Sharing is the strongest tool to learn, you help other people to prevent/fix mistakes and they help you. What am I looking for?: People like me that is learning to develop games and want to meet other people to make games with them, share experiences, ask&answer questions. How will we organize? I have experience managing large Telegram groups and also creating bots for groups. It is a good starting point since most of the people always carry the phone everywhere and also has a web/desktop application, also Telegram offers us a direct communication without compromising your privacy (you don't need to give real info or phone number to the rest of the group). If we start growing, we can just move to another platform you want (Discord, Slack, whatever is of your preference). Do you have any project scheduled? Yes, I want to build a fun roguelike, here is my current roadmap of the game: I am an artist, can I join? Sure! I'm sure you can learn from us and we can learn from you, Keep in mind that sound artists, level designers, programmers.. work together and they need to understand all the other positions to work properly. Of course this is a flexible diagram, I don't do this as my job and I don't have any deadlines, creating a roadmap just helps me with organization so I don't start wrongly (which with end even worse :P). Have in mind that my only goal is just learning, I'm not in a rush to make money or finding a job Just feel free to contact me if you want to join or if you doesn't like something of my post.
  12. Hello, I'm fairly new to development with Phaser (TypeScript). I've made a simple login screen in HTML, and I'm trying to make the "Log In" button which is in the external HTML call a function in my Phaser game. This is the button that will call the function: <button onclick="login()">Log In</button> Where in my project should I write the function "login", and how can I call it when I click the button? Any help would be greatly appreciated. 😃 I'm using this as a base for my project (I purchased his book):
  13. 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 .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
  14. Hi, We're looking for an HTML5 games developer to help with a very simple soccer penalty game. Needs to work on an ipad and iphone. Looking for someone who is able to animate. please PM if you are available to help Thanks!
  15. Yo @Deltakosh I see your samples now using this new BABYLON.GUI stuff. What is the main reasons for using this babylon gui vs using regular html markup for NON-3D guis, like huds etc. I can see when you need to attach some 2D gui to a 3D Object in the scene. But if is just SCREEN OVERLAY stuff like sliders and buttons and text... What advantage does BABYLON.Gui have over regular HTML markup ???
  16. Hey guys, So I was fiddling around with Pixi's drag example on their website. I was wondering how can one drop the object in a container. For example I want to move and object and when it reaches near the container it attaches on top of it. I'm really scared of posting this since people might think I want someone to code it for me but I just want to understand the concept and the things I can use, so to say a guide. Would appreciate the help
  17. Good morning guys! I've to load a HTML page (rules, instructions, settings, ecc...) inside my Phaser game, how can I reach this goal? Can I control that page with Phaser buttons? Can I render some Phaser button inside this HTML to manage the settings? I need that is a HTML or PHP page to be reachable and visible even outside the game.
  18. Ello guv'nors! GOOGLE HAS FAILED ME! I got some dumb probably really easy javascript things I'm stuck with and I'm in an endless loop of eh? So I've got the this array 0 = wall = cant move into 1 = path = can move into * white 1 = player start point var gamemap = [ 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 1, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, im also abit lost on how to make the character use a nested array two values on each? merge two arrays together? concat? idk... use of north east south west buttons that move the player one array over? on the click of a button CHECK show text saying if can or cant go in direction because wall etc Anyone fancy pointing me towards the right direction? If this makes any sense.
  19. It seems that to send a private message to a player, you are supposed to use I need to emit an image to a specific player so am using this concept, however it doesn't seem to work. Would anyone know how to emit an image to a specific client? Thanks!
  20. Hello, Why does the link to scene.js go below the canvas tag and not in <head> like other scripts? I'm not going anywhere with this, just I am curious (and not experienced in js). Thank you.
  21. Hi! We need to develop a short HTML game for a website and a small museum installation with 3 different activities and difficulty levels, for touch-screens (must be played with touch) with a base resolution of 1920x1080; our main priority is to have that game ready for the exhibition. Would be great but not imperative: to make the game responsive (scalable to display proportion) based on device. All the groundwork and design has been completed, and we have a first "test" developed what you could take or not as an advance. We are based in Guadalajara México and we have a very tight schedule for this project, please get in touch with me if this project matches your skillset and you are available for the next 2.5 weeks.
  22. I was wondering if anybody knows how could I go about rendering an iframe over a plane. As far as I understand that's not possible with textures, like we do with images or videos, but I found , where he archived the result I'm looking for with threejs. I was wondering if there is something like the CSS3DRender for Babylon.
  23. Hi forum, I am trying to get into developing online web multiplayer games. At first I had no idea where to start but after a lot of searching, I found I can achieve what I want using HTML, Javascript and websockets. I have programming experience in html, php, python, java, and mysql and Im just looking to learn something new! What I want to achieve is to build a game similar to the already existing game Habbo hotel ( What I want to be able to do is create something where a user can go on, load the client in their web browser, and then be shown a navigation guide that shows them different rooms. They can then enter the rooms with their character and move around, etc. (If you have played the game you know what I am after.) I want this to be real time which is why I want to bring in node.js and (both I have to still learn how to use.) Since I have just gotten into this, I have no idea where to start.. I have read many forums that suggested Impact is a good canvas to build off of but all the tutorials I have seen haven't shown what I want to do. Can anyone confirm Impact would be a good choice for me to continue with this project? What I am asking for is some direction on where to start, and what tools I need to get this project started. Any help is greatly appreciated!
  24. Basically I am making a cookie clicker type game for fun. I am trying to make the counter increase each time the sprite is clicked on but for some reason the click event on the sprite is never fired if i click on the sprite. I can't figure out why the click event isn't firing does anyone know why? Or a better way of doing this? <!doctype html> <html> <head> <meta charset="UTF-8" /> <title>Shook Clicker</title> <script src=""></script> </head> <body> <script type="text/javascript"> var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update }); var clicker; var clicks = 0; var scoreText; function preload() { game.load.image('clicker', 'assets/cookie.png'); } function create() { clicker = game.add.sprite(,, 'clicker'); clicker.anchor.set(.5); clicker.scale.setTo(.1,.1); clicker.inputEnable = true; scoreText = game.add.text(16,16, 'Computers Built: 0', {fontSize:'32px', fill: '#555'});, this); } function listener() { clicks++; scoreText.text = 'Computers Built: ' + clicks; } function update() { } </script> </body> </html>
  25. Hi Folks, I'm trying to build a Babylon app that will potentially pull in external content, and some of the content would be very easy to present if I were able to put rendered HTML inside of my Babylon scene. Is it possible to render some HTML in Babylon? Possibly as a sprite or a texture on a mesh?