Search the Community

Showing results for tags 'html5'.



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

Found 1,124 results

  1. Hello there. Reducing the number of files downloaded is important for faster loading browser games because often the number of parallel connections is limited to 2, 4 or 8. So, i was wondering if it could actually work to load all the assets as an archive, extract it afterwards and then let the game grab and assign them. Has anyone experimented with that? Maybe with some magic of the File APIs, somehow? Does that actually work? Regards
  2. We are a startup company and we have built a mobile app that hosts instant mini-games. We already have instant mini-games that have been developed by freelancers who we hired thru Upwork. We would like now to explore the option of hiring game studios or development teams to provide us the complete service from graphics design to development. We are looking for game development teams who have expertise in Three.JS because our boilerplate for the instant mini-game is based on three.js framework. The project size of each instant mini-game will be small since we prefer that the mini-games would only be single-page, single level and as simple as possible to ensure the filesize is less than 1MB. We would prefer to finalize the hiring in freelancer websites like Upwork to ensure proper delivery and payment.
  3. 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
  4. Hi everyone, I’m looking for a Phaser developer to help with the launch of a browser-based foreign language-learning game I’m working on. The game is in the style of a SNES-era RPG, but instead of battles you have conversations with NPCs in your target language, using Google’s voice recognition system. I’ve built a demo version that includes all of the MVP functionality, and has had some good feedback from learners, but need a more experienced dev to slightly improve the quality and help put it online. Potentially up to 100 hours (although could be less) at competitive rates. If this sounds interesting then I’d love to show you the demo, and talk more about the project - please send me a link to your previous games, and your contact details. Thanks so much, and look forward to hearing from you, Nick
  5. How to smooth tween animation

    How to smooth the tween animation in the android devices.
  6. Help with scoring using animate cc

    This is my code, which changes by frame, I need to do a scoring system, but when I used the following code to add a score it works fine for the first 2 frames then doubles and by the end it's like 229. Thank you for any help. Score; var score = 0; function scoreIt(); { score += 1; } Frame by frame; this.stop(); this.ans1.addEventListener("click", fl_MouseClickHandler.bind(this)); function fl_MouseClickHandler() { this.rocket2.play(); this.rocket1.stop(); this.rocket3.stop(); this.next.mouseEnabled = true; this.ans2.mouseEnabled = false; this.ans3.mouseEnabled = false; this.ans2.answer2.color = ("#00ff00"); this.ans1.answer1.color = ("#cd0000"); this.ans3.answer3.color = ("#cd0000"); } this.ans2.addEventListener("click", f2_MouseClickHandler.bind(this)); function f2_MouseClickHandler() { this.rocket1.play(); this.rocket2.stop(); this.rocket3.stop(); this.next.mouseEnabled = true; this.ans1.mouseEnabled = false; this.ans3.mouseEnabled = false; this.ans2.answer2.color = ("#00ff00"); this.ans1.answer1.color = ("#cd0000"); this.ans3.answer3.color = ("#cd0000"); scoreIt(); } this.ans3.addEventListener("click", f3_MouseClickHandler.bind(this)); function f3_MouseClickHandler() { this.rocket3.play(); this.rocket2.stop(); this.rocket1.stop(); this.next.mouseEnabled = true; this.ans2.mouseEnabled = false; this.ans1.mouseEnabled = false; this.ans2.answer2.color = ("#00ff00"); this.ans1.answer1.color = ("#cd0000"); this.ans3.answer3.color = ("#cd0000"); }
  7. Hey all, I'm using tween for my game in the android device it is too lacking and slowly working tween, then i tried with physics both too slow how to solve.
  8. Hi, guys! I develop HTML5 games and Mobile games, in game engine Construct 2. You can buy my games here: https://codecanyon.net/user/gmsdev/portfolio If you purchase any of my items – you will have full support! You can write to me at https://codecanyon.net/user/gmsdev#contact and i will answer you as soon as possible You Can Export Construct Games to IOS and Android use next services: - Cocoon.io - Intel XDK - Monaca.io
  9. Hi, My first html5 game made with gms2 called "The shape of color" . please,give me your feedback. Did the tutorial was good? game link : https://theshapeofcolor.neocities.org/ I hope you enjoy it
  10. How to detect if tab is not active

    How to detect if current window tab is not active in the phaser
  11. Fire Hungry

    http://www.firehungry.online About [Fire Hungry] Fire Hungry is a friendly, fun 2d shooter io game. Play as your favourite snack and burn up others with your powerful rapid flames with a simple mouse click. Players must strive to reach the highest score! Have fun! Fire Hungry was created by Infamous Flames How to Play [Fire Hungry] Unlock a character or use the default skin. Type in a name of a choice and click the blue play button to start. Move your player around the mouse. Click to shoot. [Fire Hungry] Strategy Moving your player carefully with the mouse will make dodging fire bullets a lot easier from other players.
  12. HTML5 game sale

    Hello! Sale games non exclusive Contact: toveo [@] yandex [dOT] ru Game 1 7 cars 35 level 3 location Screenshots Game 2 5 cars 35 level 3 location Screenshots
  13. Hi, I have built a mini games app in Adobe Air (in iOS and Android). It features lots of swf animations and lots of games. Now since the future of Adobe Air is circumspect. I want to hedge my bets by rebuilding the games in another platform which has a better future outlook. I had a few questions: 1) Which platform is better for building an app- OpenFL or Phaser ? I found OpenFL online which seems to be the best way to port flash games into html5. 2) Can I have a multi platform app in which suppose 100 games are there - 50 made in Phaser and 50 made in OpenFL? 3) I had read in one website that Phaser is not good for resolutions above 600x400 px. Is this true? 4) Since we want to support all resolutions in Android and iOS- we need vector graphics (the core strength of AIR). Do Phaser/CoreFL support Vector? Thanks, Nish
  14. how to make number tiles

    How to make number tiles with colors for example: array[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]; I need to show into these box
  15. We are looking for developers who can create our single-page web-based mini-games. We prefer to finalize the hiring in freelancer websites like Upwork to ensure proper delivery and payment. We have several in the pipeline and it has become a bit challenging to find Pixi developers in Upwork so we are trying our chance to find developers here.
  16. DynamicTextures on a Cube

    Hello again! I was playing around with some of the examples (love the playground). In this instance I was looking at a PG that created a ground and applied a dynamic texture to it. For kicks, I changed it to a Cube, but noticed that whatever I drew on the dynamic texture would show up on all 6 sides. Is there a way to make it so that if I draw a star on one side its not duplicated on the others? Thanks for your time
  17. Hello, We are a French indie dev studio based in Paris : http://www.pinpinteam.com Few years ago, we have developed web multiplayer games based on flash : http://www.jeux-gratuits.com/jeux-multijoueurs.html and today we need to port those flash games on html5 We have already started the job. Examples of Yahtzee : http://www.jeux-gratuits.com/jeu-yahtzee-multijoueur.html (You can switch to flash and html5 version on the main page) We have done the porting of 3 of the 29 games (Rummy, Yahtzee and cheekers) Few weeks ago, the freelance developer who handle this job has quit for a full-time position So we are looking for a new developer who can restart the job for 2 or 3 more ports. Objective : Port this game (http://www.jeux-gratuits.com/jeu-mahjong-multijoueur.html) runing on flash with Smart Fox Server 1 to an HTML5 game with Smart Fox Server 2 - You'll get all source code from previous ports (Rumy, Yahtzee, Cheeckers). Lobby and all other UI stuff are same for all games. Those first 3 ports were done with the Cocos-2D JS framework. - You'll get the Flash source code from the Flash Game version - Mainly you should implement game logic for the game you need to port - Generally you should make all game logic (Client/html5 and Server/Java) and insert art that we provide you - We are the owner of all the source code you will do for the port - We need a "free-of-bugs" build. QA tester from our studio will QA the game. - Our previous freelance can be consulted and contacted if you have questions - If the job for this first game is well done, we can have a long-term partnership. To apply : - Send me an email to geraud@pinpinteam.com with your basic information and some references (portfolio, website, previous work) - It's a freelance job, remote only - Then I will send you back an email with further information, It's a PAID JOB, Have a nice day, Géraud
  18. how to load custom font

    How to load custom font i need to use daft lowercase font instead of down below, var tiles = this.game.add.bitmapData(this.tileWidth, this.tileHeight); tiles.ctx.font = '30px Arial';
  19. Hey all, i have try to creating shooting game. i need camera with gun. i have try this code. but https://www.babylonjs-playground.com/#1pyfub#18 it's not working. camera child object does not showing in scene. how it's working...
  20. Kid Rat, Game platform clasic

    Hi guys, I share a litle game that I did in my free time the link is the following: https://real2412.github.io/kidrat/ I also converted it into apk with cordova, although it is a version in Spanish and I have no idea how to remove the cordova icon. In case you want to see it look for it in google play as "KidRat". It is open source you can check it in the following link: https://github.com/real2412/real2412.github.io/tree/master/kidrat Greetings.
  21. how to make bingo game using phaser

    Hello everyone Im new to phaser, i need to make bingo game So please share your knowledge.
  22. Hi, I've made a little game in my spare time called hostile shapes. Its my first time using PixiJs, which i now think is awesome. Very easy to learn with lots of helpful docs and examples. Link http://www.hostileshapes.com note: Androids will get re-directed to a version in the play store built on Cordova. i had a nightmare with web view performance so had to use crosswalk. Hope you Enjoy! Rob
  23. Hey , If i Multiple objects loaded time the device is hanging. i have using small objects only 3 or 5 mb file objects only. how to solve this type of problem.
  24. Hi, We developed a side scrolling adventure game that is Toto Adventure, which you can add on your website if you want. Below are the game details: Title: Toto Adventure Iframe Code: <iframe src="http://www.coolmathgameskids.com/devgames/toto-adventure/index.html" scrolling="no" style="border:0; height: 478px; width: 850px; "></iframe> Screenshot: http://www.coolmathgameskids.com/wp-content/uploads/2018/03/Toto-Adventure-.jpg
  25. Cobalt Dungeon

    Hey there! I recently released a mobile game called Cobalt Dungeon. This game is based on Phaser 2 and uses a fullscreen canvas and basically only touches the DOM during initialization. The application itself is wrapped in Cordova 8 and runs on iPhone and Android. It's currently available for both platforms in their respective stores: Cobalt Dungeon for iOS on the App Store Cobalt Dungeon for Android on the Play Store The game took me four months to create, from start to finish. I had created games before using HTML5 / canvas, and had released one before on the app stores (I later open-sourced it as Mobile Game Skeleton, if you're curious), so the process was familiar. This game is very Indie, like most of the games on this forum, with me being the only dedicated contributor. I made the music and sound effects, sourced /remixed existing graphics, etc. One thing that might make this game a little special is that 99% of the development was done on Linux, almost entirely using open source tools, though I do have a Macbook Air I use solely for iOS builds and I did use FL Studio for music. I'd like to talk a bit about the process I went through, hopefully someone else will find it useful as well! I have been producing a series of game development videos recently and will make a high-level one soon based on this post! I also have a blog with hundreds of development posts, if you are into the whole reading thing. Development Workflow Almost all of the day-to-day game development, e.g. the actual core gameplay of moving around the dungeon and attacking enemies and picking up items, is designed and debugged using the responsive view of the web debugger in Google Chrome. Personally I prefer Firefox for web browsing but there's no beating Chrome when it comes to dev tooling. This tool is great because once you tell it to pretend to be a particular device (e.g. an Android Nexus 5x or an iPhone 6s) it'll do everything from setting the user-agent to reconfiguring the pointer to send touch events. Being able to interact, alter game state, and read console messages in real time is a total must. Very little on-device development happened for the first three months (mostly occasional performance testing). Of course, testing locally is fine for a while, but you definitely do need to test on a real device. My daily driver is a Nexus 5x which is a little over 2 years old. I used this device for most of my testing. I figure the average phone is about as powerful as this one so I would constantly make sure the game ran at 60 FPS on this device. My other test device is an iPhone 5. This phone is like 5 years old, so it's mostly safe to say that any game that'll run on this phone will run on any modern iOS device. (One caveat is the new iPhone X notch, which I still need to fix. Resolution differences are also important to consider) You may find weird edge cases which only present themselves when your game runs on a physical device. A common example is related to touch inputs. When debugging these issues you can actually use a Chrome feature called Remote Debugging, which will allow you to use Chrome installed on your computer to interact with Chrome on your Android device (I'm not sure if such a feature exists with iOS Safari, but I didn't need such a feature). Normally Chrome will even show duplicate the view of the phone on your computer screen but it doesn't seem to work with Canvas. Artwork/Aesthetics The game uses 16x16 tiles and a palette of 24 colors. If you find yourself making a pixel art game, you must pick a palette and adhere to it! I found that having such a restriction really helped with creativity, as well as getting an overall cohesive feel. The basic terrain is based on free artwork I found on OpenGameArt.org. That website is amazing for getting assets and I highly recommend you check it out (here's a bunch of music I contributed if you're into that). The players / enemies are based on another art pack which I purchased a license for (around $30 at the time, I think). I would then touch up this artwork to get everything following the same palette. I would also have to stitch the graphics together to build spritesheets and get animations going. Any time I would create new artwork I then do my best to fir the same art style. For example, the first boss Shroomzilla I put togehter. It uses the same color palette, though the visual style is definitely more complex than the simpler graphics used throughout the rest of the game. The graphics for the Ice, Moss, and Fire worlds are altered from the base terrain, but still follow the same palette. The main menu graphic of a stairway going into the dungeon is also something I had to draw based on googled reference material (also with the same palette). The graphics I use do use 1x1 pixels in their source PNG files, despite being rendered on device as some arbitrary pixel size, e.g. 6x7. I do the stretching by dynamically scaling the viewport when the game first loads (I'll make a video explaining this process at some point). This is cool because it's impossible for me to address a sub pixel. You'll see this issue in a lot of pixel-art games where there's partial pixel overlap. Rendering on Android is done with Web GL, and on iOS with software. This was necessary to get the viewport scaling to work, prevent blurry pixels on iOS, and prevent slow performance. E.g., scaling the viewport when rendering Web GL on iOS is very slow and blurry and slow, and works perfectly on Android. Music/Sound Effects The audio was all custom made for this game, both the sound effects (SFX) and the background music (BGM), though the process for making both is very different. SFX: The Sound Effects were mostly made using the wonderful as3sfxr tool. This tool, despite being super old and written in Flash, is one of the best (if not the best) tools for making 8-bit (-esque?) sound effects. The workflow I use is to first figure out what part of the game needs a sound effect, then click the category which sounds most similar, and then start randomizing the sound until it sounds similar to what I'm looking for. If a randomization goes in the wrong direction then undo and try again. Once a sound is pretty I then modify individual parameters until it sounds correct. Once it's done I generate a WAV file and load it into FL Studio. The goal with FL Studio is to create a single MP3 file with all the sound effects, e.g. the first at 0 seconds, the next at 3 seconds, etc. Once this is done I specify the sound locations using JSON. Unfortunately I kept having issues with Phaser's audio library so I chose to use a library called Howler to play the audio. The code for using Howler looks something like this: const TIME = 2999; const SFX = { damage: [0, TIME], explode: [3000, TIME], door: [6000, TIME], wait: [9000, TIME], upgrade: [12000, TIME], }; const sfx = new Howl({ src: './audio/sfx.mp3', sprite: SFX, autoplay: false, volume: 1.0, onload: finishPhaserPreloading }); sfx.play('damage'); BGM: The music was entirely composed using FL Studio (overview video, some notes on how I made the music). One of my goals was for the game to feel familiar to the generation of 8-bit / 16-bit gamers. However, making actual 8-bit / chiptune music was not a requirement by any means. So what I chose to do was keep every song simple; most have only 2 or 3 instruments. With the exception of percussion/drums, the music is entirely synthesized. Whenever possible I would use simple waveforms and simple filters (e.g. for the ice levels the lead is a sine-wave with a touch of delay and reverb). Sometimes I would use more complex instruments, like the string instruments in the main menu / fire levels. With the exception of the main menu music, each song follows the same structure, which you can download as an FLP file here. The tempo does change which is why the songs are of different lengths. Overall I like the way the music turned out. I frequently listen to it while commuting. There's a few things that annoy me, like the bridge in the ice music or the repetitiveness of the moss/jungle music, but overall it's not too bad. The music is the largest part of the application, consuming about 18MB of the overall ~24MB binary. Since most people are listening to it via crummy mobile phone speakers I've compressed the audio at 96kbps in the game (higher bitrates are available for download on my Patreon). Libraries / Code As I mentioned, this game is built using Phaser 2 (I might upgrade to Phaser 3 soon, now that the children/group feature is being added), as well as the Howler library. Code is written in mostly ES2015 syntax. I use Browserify to combine my code, traversing import/export statements. Once browserify is done I then pipe the output through Google Closure Compiler to get a single JavaScript file without any comments or whitespace, and being minified as much as possible (e.g. dead code paths are removed). I don't, however, run any of the libraries through closure compiler. So in my final HTML file I'm loading four libraries: phaser.js, howler.js, cordova.js, and my games bundle.js. Many people seem to enjoy many weeks configuring webpack and getting bleeding-edge versions of the language transpiling but I try to avoid that as much as possible. The game is wrapped in Cordova 8. This requires a whole bunch of JDK and Java build tooling be installed, as well as Xcode on my Macbook. Configuring all that tooling is a nightmare! I also make use of the following four Cordova plugins: <plugin name="cordova-plugin-vibration" spec="^3.0.1" /> <plugin name="cordova-plugin-media" spec="^5.0.2" /> <plugin name="cordova-plugin-admobpro" spec="^2.31.1" /> Vibration is required to get vibration working on iOS (it's not required for Android, it just works out of the box). The media plugin is interesting. At first I would play all the music using Howler. This means the browser itself load the audio into memory. Unfortunately I found that the browser is incapable of destroying the music, even when the appropriate methods are called to unload the audio! Using the Cordova media plugin is necessary if you want to be able to play more than a few songs and not have a mobile browser segfault without a stacktrace in sight. The admobpro plugin is used display ads in the game. Unfortunately the author skims a few percent of your proceeds off the top unless you buy a license. I'm also trying to use an IAP module but am currently having compatibility issues with that and Cordova 8. Now that the game has released I'll try to get the plugin working as I'd like to offer players the ability to give me $2 and to have ads disabled (ads also hurt performance). I do load two JavaScript libraries installed via NPM into the compiled bundle.js by way of Browserify. These are two libraries I also made and open-sourced. Neither has any dependencies so that the output bundle is as straight-forward as possible. The first one is roguelike. This library has a ton of features! All the level and room generation is done using this library. I also use it for a lot of math / random / dice roll calculations as well. The second library is autotile. I use it for taking a 2D array of booleans (representing if the ground is a floor or a hole) and converting it into a format to represent the actual spritesheet offsets. This is very handy so that you don't need to perform the calculations yourself. This allows me to represent a floor using a simple array of booleans instead of tightly coupling it with spritesheet offsets. Tools As I mentioned, I use FL Studio to do the audio work. I bought the Producer version for $200 and have been really happy with it. Since I'm running on Linux that means I need to wrap it in Wine. This experience is a little iffy, e.g. if I attempt to scroll anywhere in the UI the app completely freaks out. Other than that it's been a pretty solid experience, especially since my songs only have a few instruments. For most music, however, this won't be true. The more instruments and effects running, the higher the CPU cost. Running FL Studio directly on Windows will be much more efficient than with Wine and Linux. There are of course free alternatives, especially native Linux tools, but I had used it years ago and was comfortable with it. All coding was done using VIM. Once you get used to those keybindings you'll be trapped using this editor forever. While most of the rooms are procedurally generated, I did want to create a bunch by hand. For example, all of the tutorials and challenges are done by hand. For those I used a tool called Tiled. (At first I hand-generated JSON. This would never scale and prevented creativity). Tiled allows me to edit a visual map, with different layers, using the actual spritesheets used in my game. Tiled will output an XML file format which can even be imported into Phaser! However, passing around a file format representing rooms which is so tightly coupled to the graphics is not a route I wanted to take. So I wrote a converter tool to convert the XML files created by Tiled into a very simple JSON representation which contains only exactly what I need to represent a level. As an example, enemies can be represented as an array of objects with an X/Y coordinate, an Enemy ID, and their Phase. The Tiled representation would contain lookup information for the enemies coordinate in the spritesheet, the layer then graphic is on, and wouldn't have the metadata I need. Here's a video of my Tiled workflow if you'd like a better idea of how I make rooms. For creating the Bitmap font format used by Phaser I used a tool called BM Font. This allows me to take a TTF font and create the XML/PNG files needed for rendering on the web. The process for doing this can be super complex so I even made a video on font conversion for Phaser. Graphic editing was done using GIMP, a free image editing app originally made for Linux but is available for all platforms. Coming from a Photoshop background it can take a while to get used to the keyboard shortcuts and the weird choices GIMP made (e.g. layers have different dimensions, what's up with that?!) I created a palette using the 24 game colors and that really helped my efficiency. I also tweaked the UI to be in single window mode (ala Photoshop) and also reconfigured the tools (mostly disabling anti-aliasing, enabling a 16x16 grid). Once you dig through the menus it's possible to save the tool configuration permanently, which really helps with efficiency. Hardware I did the drawing of the main menu graphic using an old Wacom Tablet bamboo, it's older but probably cost $100. The music was made using an Akai MPK Mini (two octave MIDI controller), also for $100. Neither of these tools were required to produce this game, but they sure make it a fun process. All development was done using a Lenovo Thinkpad Carbon X1 5th generation, by far the best laptop I've ever owned! Worth the $1600 price tag. Live Ops Once a game is live you don't want to have to release a new version of the app for every little update. This is when having a CMS is really helpful. I built a Node-based CMS specifically for game development called Grille. My workflow for this is that I edit a Google Sheet, change values (for example enemy attributes, shop costs, game text, etc). Once I'm satisfied with the result I use Grille to generate a JSON file which I can upload to a CDN. Of course, it's useful to know what in the game actually needs changing! For example, do most players get to level 7 and then stop playing because they get killed by a Mage and get frustrated? For that I use a service called Mixpanel. Throughout the codebase I make analytic calls with useful data. For example, when a player dies, goes to a new floor, buys a shop item, views and ad, etc. I can then use the Mixpanel UI to view a "funnel" of users as they progress through the game. [Attached is a screenshot from Mixpanel showing the level progression funnel] Monetization I make money with ads thanks to Admob. There are two types of ads; the first one is an ad shown when the player switches between rooms. This ad is displayed at most once every five minutes. The second ad is an ad the player can choose to view. When the player dies they can choose to view an ad to respawn in the room they died in. Otherwise they can choose to respawn at an older save point. Let me know if you have any other questions about the development process, or if you'd like me to produce a video explaining any of these topics. Thanks!