Popular Content

Showing most liked content since 02/18/2018 in all areas

  1. 13 points

    Stupax - Sidescroller game

    Hi all, I would like to introduce Stupax: A different sidescroller game, where you are not the guy, you are the level! In fact you control a movable platform using the arrow keys or your gamepad (Gamepad API) to help the guy (namely Stupax) to get through the levels. You can play the game here: http://mbarde.bplaced.de/stupax/ Controls: Arrow keys / Gamepad 'R' for level restart 'ESC' pause game and open menu Create and test your own levels here: http://mbarde.bplaced.de/stupax/editor.html You can find further information on my website and view the source code including contributions for the music, sounds and textures on GitHub.
  2. 12 points

    Animation weights

    Hey team! @MackeyK24 asked for it with so much energy that I spent my entire week end working on a new feature: the animation weights support To learn more about it, please read the doc here: http://doc.babylonjs.com/babylon101/animations#animation-weights A demo can be found here: https://www.babylonjs-playground.com/#IQN716#3 As always, any feedback is welcome! Note: I could have added a third animation to the demo (a run animation) but the model animation for run is a bit bad (it looked like the model was flying). If you have a better model, feel free to let me know
  3. 9 points

    3D Level Editor

    A bit on the early side, but I've been working on a 3D level editor and a game to go with it. I did look for 3D WebGL map editors when I started and didn't come across any open source (besides Voxel type) and I want to use ie: glTF models inside the editor and integrate in a game and one day a easy to use game creation engine. The editor itself will be open sourced (right now it's too tightly integrated with the game). Hoping it will make game development easier and faster for games with small maps (2D, 2.5D or 3D) - users often have better ideas than game creators ever could have imagined! Partly inspired by this project https://brianzinn.github.io/react-redux-babylonjs-starter-kit/quarto (I copied the game from @Temechon). The first version of the level editor is here: http://robolo.co/game/build It's very PoC (Proof of Concept) material with lots of known issues and bugs. My next idea is instead of having the semi circle of things to instead have a tray that slides out in front of the board (and board slides back). Then I won't need all the popups with tiny text and it will work in VR. Right now the levels that you create can be published to the game, but not always published correctly, sorry . Publishing a level creates a URL you can share, though! To give an idea of how some bots work I created a 4 level tutorial: http://robolo.co/game/play (if the roboloco logo is spinning a level is loading... i'm on an affordable tier!) The game received lots of constructive feedback from an Indie game dev meetup this week, so will be working on those ideas, but unfortunately really busy on other things as well So, back to the drawing board... again. Thanks!
  4. 6 points

    Phaser 3.1.2 Released

    Today we released Phaser 3.1.2. This is a point-release, meaning none of the public-facing API changed and focused on our continued effort to stamp on bugs as quickly as we can. It also includes hundreds of fixes to the jsdocs. The largest fixes are around the renderer, bringing in Tile alpha and Scale support to the Static Tilemap Layer, and fixing an issue with the Particle Emitter batch that would manifest if you had blend modes enabled. Grab the latest build from GitHub, npm or CDN and as usual see the full Change Log for details. http://phaser.io/news/2018/02/phaser-312-released
  5. 6 points

    #ifdef video on Babylon.js & WebVR

    Hi guys! We've done a cool & fun video on how to create a full WebVR experience using 2 lines of Babylon.js: Feel free to relay it on social networks David
  6. 5 points

    Virtual fashion show

    Here's a demo of a virtual fashion show that I put together. There's armature animation and morph targets (vertex and texture morphing) in this one. It should work on desktop and mobile devices. http://punkoffice.com/vfashion/
  7. 5 points
    The Leftover

    Illuminated City

    This is wobbling to market. Crime analysis tools: prototypes built on open data. The "strive" was for great presentation fast, slicing a lot of data in many useful ways. I started with SVG - and still use it for conventional charts. A lot of the data is presented on a map. In January, I elected to dispense with Google Maps and put the whole thing on a Babylon Canvas. I already felt late so it has been an intense period. Images are below and you can use it at https://sanfrancisco.ca.illuminated.city, https://chicago.il.illuminated.city and https://boston.ma.illuminated.city. The 3d part is called "geo-location". (You may need to sit and the landing page for a few counts before trying to navigate.) Thank you all for making Babylon. It has changed my life. Also, a shout out to JohnK for suggesting SPS, which have served me well. Comments, suggestions, conversation all welcome. Notes: ~ I applied scene.pick to allow the user to enumerate details of crimes in a specific area. ~ Chicago is mammoth, with about 400K crime records and a bazillion hexagons, but it still works Image 1: Assault and Battery in San Francisco for the past three years. Image 2: Theft from motor vehicle. Color indicates increase/decrease; elevation indicates current level
  8. 4 points

    Dreckon - Shoot 'em up game

    Introducing my new game! It's a shoot 'em up bullet-hell game designed to run on both mobile and desktop browsers. Link http://toraleca.com/g/dreckon Art Cover/Screenshot How to Play Touch (or click) the screen to move the ship and it will also shoot automatically as you hold it. Release to stop from moving and shooting. Game Description Defeat all last retreating alien air units on the sea and lead earth to victory! Features The game contains of 3 levels; introductory, normal, and difficult level. Each level can be finished around 3 - 6 minutes. The Player is given a maximum of 3 lives to survive, with a single weapon upgrade to get through the whole levels. It has a score system, where each defeated enemy can increase the score. The game has a hidden score multiplier. The multiplier keeps growing based on the number of bullet hit towards the enemy, and reset when the Player got defeated. In short, if you want a higher score, don't die and kill more! Technical The game is made using Cocos Creator at 60 fps by default, WebGL only, and designed to run on both mobile and desktop browsers, except UC browser. It is designed to trap you into a position that you need to discover yourself so you won't die! The game doesn't just blindly throw bullets and enemies all over the place. The game was developed around 1.5 working months, part-time. All the illustrations, sound effects, and soundtracks are all made by me except the fonts. If you like the soundtracks, please visit https://soundcloud.com/toraleca/sets/dreckon-game-soundtrack. Contact Please visit my website http://toraleca.com. That's all thank you! Let me know what you think, and looking forward for your feedback. Update 25/2/2018: - Adjusted the sound volume - Game over now shows Player last score - Gameplay: Increased invincibility time to 2.5s upon revival - Gameplay: Player aircraft position is now 16px higher from touch position than previous - Bug: The game may not show the return menu on final level clear.
  9. 4 points
    We’ve been working part-time on our own take on the IO game for close to a year. Exocraft is an action/strategy persistent MMO that is focused around more depth and progression than most IO games. You start as a small mining vessel and build up your unique ship using dozens of available parts. Team up with others to mine and battle planetary defenses on a dying alien world for resources, or compete in skirmish-style tournaments to reach the top. The game is built with Phaser-CE on the client and uses a custom server built with Node.js, MongoDB and Redis -- backed by our own GoldFire platform for signup/login, communication, achievements, etc. All players are in the same world, so there are no servers to choose from. As more players come online, the world will dynamically size up and down to fit the number of players and maintain resource balance. You can play now at https://exocraft.io, and any feedback is greatly appreciated!
  10. 4 points

    Third-person shooter demo.

    This is a third-person shooter demo. If you like it, please give me stat. It USES babylonjs, such as ArcRotateCamera. github: https://github.com/renjianfeng/BabylonTPSDemo github.io:https://renjianfeng.github.io/BabylonTPSDemo/example/index.html
  11. 4 points
    It's finally live! https://feudalwars.net
  12. 4 points

    Blender Exporter Version 5.6

    Blender exporter was updated. Here is commit message:
  13. 4 points

    GPU particles

    Heya team!! I'm proud to announce that the GPU particles feature is now available! Documentation: http://doc.babylonjs.com/babylon101/particles#gpu-particles Interactive demo: https://www.babylonjs-playground.com/#PU4WYI#2 Please note that this feature requires webGL2 or it will fallback to CPU particles
  14. 3 points
    Thomas Hunter II

    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!
  15. 3 points

    Coding Slither.io in One Week

    Check out my new video about my one week Slither.io project with JavaScript and Phaser!
  16. 3 points
    Phaser 3 BOILERPLATES | STARTERS Unify, upgrade, use. Last updated: March 6 Table of contents: 1. Intro 2. create-phaser-app 3. List of existing boilerplates 4. What kind of features we need/want 5. What's the point Intro: Hello there everyone! As Phaser 3 came out I immediately started to look after some Boilerplate which would take care of basic stuff and speed up the development. If you don't know what I am talking about, think of create-react-app, but for Phaser. There are a few already, however I think that is one of the things that shouldn't be re-created every time, but I'd rather see one, powerful, generator that is community driven, updated, and has many options. Richard has mentioned that he prefers this to be created by community, and just highlighted on the Phaser website. I am aware that sometimes you need something really different and boilerplate X won't suit your needs, but that's where configuration comes in (for example question at the beginning which physics you want to use). Unless even that can help you - get a different boilerplate/create new one. I want to help and in my opinion boilerplates are great way to unify the community, show out the best practices and speed up the development. Let me know what do you think about it. create-phaser-app: So currently I am developing this generator, which follows the convention of create-X-app. It will be configurable with --options, or by default running a "wizard" where you select basic options. At the start there will be only plain JS and typescript probably, but later on I'm planning to add things like multiple examples (ping-pong, platformer, etc) and many other stuff, but also some --basic flag where you get 0 configuration small project without any webpacks or anything! https://github.com/phaser-contrib/create-phaser-app Here's the repo. Project will be open up for contributions after I prepare the base. Hopefully after everything's prepared community will be able to focus this one and stop creating new ones, unless they really need to. Existing boilerplates list: https://github.com/oliverbenns/phaser-starter - https://github.com/rblopes/generator-phaser-plus - by @rblopes https://github.com/lean/phaser-es6-webpack/tree/phaser3 - (phaser 3 on different branch, i think it's still in development for p3) by @leandro Boilerplates/examples (things that fall in into example category, but still can be a good foundation) https://github.com/nkholski/phaser3-es6-webpack - generic platformer template (mario in this case) and it's based on phaser-es6-webpack by @nkholski I'll keep the list updated, you can give links in the comments too! Features: What should the perfect boilerplate have Recognizable name ES6 transpilation with babel ES6, CoffeeScript or TypeScript Webpack, along with live and hot reload Environment variables Continuous delivery and continuous deployment Images compress JS minify Standard folder structure with basic scenes like preload screen, game Config file for game configuration with all possible options Maybe something that will make sprite bundles ES lint configuration? (not quite sure as many people have different ways of writing code, however maybe just a small base for further configuration?) CLI commands (like create new object) Popular building integrations (Cordova, Cocoon etc) at least on some level Easy way to update Phaser Configurable at the start: Provide bigger example? or just standard template (for example do you want only one example asset, or whole game generated) Physics selection List of some basic useful plugins? That's all coming to my mind for now, leave the comments what would you like to see in a boilerplate! The point?: I know this may be not immediately clear "what the hell this guy want to do with this topic". I think it would be nice if community choose one boilerplate that already is in a good shape and drop all the focus on it. I don't think that this will be better if every person creates a new boilerplate for no good reason and reinvents the wheel. So to summarize: Create a list of boilerplates to have it in one place Let's choose together a boilerplate which community would accept to take care of, becoming a kind of "official" boilerplate (again think of create-react-app that is used by most of the people). (and yes, I am aware that not everybody will want that, but in most cases unified standard is a good thing, I guess?) List of features that this boilerplate would ideally have. I want to hear your feedback about the whole concept, maybe I am dreaming too much. From my side: https://github.com/lean/phaser-es6-webpack/tree/phaser3 seems to be the most popular, however don't think it's phaser 3 ready yet? Haven't looked at it yet. https://github.com/rblopes/generator-phaser-plus is also looking great, I've used it at it seems it has most of the features. What would I like to hear from you guys: Do you like the idea? If yes, would you like to prefer to choose an existing boilerplate or create a new one How would you name it if new one? If new one, clean start or forked from other project? What features would you add to the list Do you know any other generators that should be on the list? So let me know what do you think about it, let the discussion begin. Yey. Best regards.
  17. 3 points
    I have written a tutorial on how to load tilemaps on the fly in Phaser 3. The tutorial focuses on a specific application of this, which is loading "chunks" of a big tilemap depending on the player position, in order to avoid loading the entire map. This is useful if you have a big open world in your game. Click here for the tutorial Click here for the code Click here for the demo
  18. 3 points

    Change cursor view in PIXI.js

    Here's an example: http://pixijs.io/examples/#/demos/custom-mouse-icon.js
  19. 3 points

    Babylon.js: A double array to 3d

    Hi and welcome to the forum from me as well. Checkout wireframe PG https://www.babylonjs-playground.com/#VQ84FP#2 or edge rendering PG https://www.babylonjs-playground.com/#VQ84FP#3 IMHO SPS is still the way to go, it also creates a single mesh SPS Basic https://www.babylonjs-playground.com/#9PP17F Wireframe https://www.babylonjs-playground.com/#9PP17F#1 edge rendering https://www.babylonjs-playground.com/#9PP17F#2 250000 boxes https://www.babylonjs-playground.com/#9PP17F#3 Thrown in some array methods as well. Removing hidden faces is much more of a problem. EDIT on further thinking the line mapArray[0]-- should not be included
  20. 3 points

    Modern JavaScript Tools

    Might be worth phrasing the question a little differently, what problems do you (as author) or your consumers have with your current workflow? By phrasing like this you might get better answers as to how a different (newer) system might help to solve those problems. Browserify and NPM primarily give you access to node's commonJS module flavour. Personally I was never comfortable with weird JS namespacing solutions (or revealing module pattern) so access to a proper module system was the problem that these tools solved. Partly access to a proper module system is a convenience but it also helps resolve the very real problem of naming conflicts in the runtime environment (i.e. the client). Take for example the following problem: * I 'publish' my Eventemitter module for implementing pub/sub. * Consumers consume this module by including a script tag which dumps an `EventEmitter` global in to the page, whereby the application code can access and use my module. * Someone else publishing a module that also exposes an `EventEmitter` global in to the page. * As a consumer I want both modules but now I have a problem as they both conflict over that `EventEmitter` global and there is no clean way to resolve this. For large libraries like Phaser or, say, React, or `quick`, this probably isn't too much of a problem as you likely won't have a naming conflict, particularly if the library in question uses an obscure and fairly unique name (i.e. not EventEmitter), but, this brings another problem. The Unix Philosophy states that a program/process/module/thing should do one thing well and that complexity is achieved through composing small 'things' into larger things. Including larger catch-all libraries (or frameworks) works directly against this and when you're worried about conflicts (particularly seemingly trivial things like naming conflicts) it actively prohibits the release of smaller modules, or even individual functions. Take the case of underscore and lodash which are simply a collection of convenience methods, the chance of conflicts between functions named 'map', 'reduce', 'concat' etc is very high if you're after a 'small module' philosophy. Using a proper module system, one where the consumer can optionally choose to name their imports, solves this problem cleanly i.e. as a consumer I can name things as I choose if/when required: const FooBarBaz = require('phaser') import CrazyUniqueName from 'React' Now I have no naming conflict problem. Take this further with named exports and as a consumer I can pick and choose what I want from a module, again, optionally renaming it if necessary: const {render} = require('react') import Rectangle as NearlySquareThing from 'Phaser' Now take this even further and introduce additional automated tooling that can take this specification for how modules are consumed and create smarter builds, all in the hands of the consumer, and you're on to a real winner i.e. if I only want to include 'map' from lodash then current modern tooling allows me to take that without dumping the entirety of lodash into the page as a script include just to access one function. You could have achieved this before but it would require knowledge of knowing how to create custom builds of dependencies and that is painful, Bootstrap had several helpers for creating custom builds (for example) but its still a pain and updating the dependency becomes close to impossible when you're using custom builds. This is another advantage of using NPM, dependency version management. This is achievable in the old method, just download a new version and include it as a script tag, however, NPM have automated this workflow. I have worked on several complex applications over the past couple of years, all with dependency management handled by NPM, some projects only contained a handful of top-level dependencies but all projects ended up with hundreds (and sometimes thousands) of actual dependencies, imagine trying to update these by hand! It is practically impossible unless you have a huge amount of time, NPM helps (doesn't totally solve) to eradicate this problem via automation (via specification) and mostly it just works. For me it almost boils down to these two workflows: 1: * Find a download link * Remember the download link * Download the file * Place the file somewhere, probably inside my repository * Include as a script tag * Handle naming conflicts * Use the global the script exposes vs 2: * find the module name I want * npm install my-awesome-module * include module in source code and use it Most of the steps from #1 are removed in #2 because it becomes automated i.e. the name of the module you are using is stored in the `package.json` and updating it becomes trivial (of course, the update could break your stuff, which is certainly non-trivial, but the actual update is automated and trivial). Workflow 1 highlights another potential issue, if I have a repository do I really want to keep all dependencies in it? Almost certainly no, but you might want to depending on how much of a masochist you are. I had a look at your main `src/quick.js` file, seems extremely well structured and very clean to me. On the flip-side it also seems super easy (trivial even) to extract those functions to separate files and then include them in an index file (or main) of some sort to expose them and get all the advantages listed above. But, again, if you're comfortable with your current workflow (looks like it works, your structure, I think, is superb, I personally would hate to work on such a large file but I imagine the practicality is that it is easy as you've separated everything up very cleanly) then why change? Do you think you might be more comfortable with an alternate workflow?
  21. 3 points

    Bone-based Modular Weapons PoC

    Just a quick little demo of something I thought would be fun to create. No smoothing groups or textures and dirty animations. PoC PoC PoC. All separate weapon parts are weighted to bones, so they can be positioned, scaled and rotated individually, to create endless weapons(Only 4 in this example), all from a single mesh. I've chosen to do it in 3Ds Max, although it can be done in code as well. http://playground.babylonjs.com/#ZIH5Y7
  22. 3 points

    Math Question

    This paper http://www.unizar.es/matematicas/algebra/elduque/Talks/crossproducts.pdf proves the following theorem Theorem 1. Let × be a vector cross product on the vector space V . Then dimV = 1, 3 or 7. That is vector cross products only exist in 1, 3 and 7 dimensional space. This paper https://arxiv.org/pdf/1310.5197.pdf generalises the result to define a cross product that works in some special vector spaces with odd dimensions. However none of this stops you taking two n dimensional arrays and combining them in any way you wish.
  23. 3 points

    CellShading post-process

    Dae is always a wae... http://www.babylonjs-playground.com/#G0XUPL#5 (It's an ugly hack of light calculation shader)
  24. 2 points

    Generic platformer boilerplate

    I created a Phaser 3 - ES6 - Webpack-repository a couple of months ago (or more accurately made a quite ugly update of an existing repository). A few days ago I replaced the simple bundled examples with a, let's call it "generic platformer". This is the result of exploring the Phaser 3 API and I plan to continue to improve it (but not create a complete game because of obvious copyright reasons). Feel free to check it out: https://github.com/nkholski/phaser3-es6-webpack I aim to tidy up the code and add comments in time for the release of Phaser 3. I haven't managed to get deploy to work properly though which means I can't offer a playable demo. I ran out of ideas on how to update the webpack-configuration file so I decided to share the project now so that I might find someone to assist me. Questions, suggestions and contributions are all more than welcome.
  25. 2 points

    Brunch with Phaser 3 (starter project)

    A Brunch skeleton for making games with Phaser 3. (Why Brunch?) Choose your own adventure with CoffeeScript, ES6, TypeScript, or plain JS. server live-compiles and live-reloads minifies (in production mode) fast builds automatic NPM integration easy! npm install -g brunch && brunch new <project> -s phaser # OR choose one of the variants: brunch new <project> -s samme/brunch-phaser-coffee # CoffeeScript brunch new <project> -s samme/brunch-phaser-es6 # ES6 brunch new <project> -s samme/brunch-phaser-typescript # TypeScript samme/brunch-phaser For Phaser 2 / Phaser CE: npm install -g brunch && brunch new <project> -s samme/brunch-phaser2 samme/brunch-phaser2
  26. 2 points
    Hi all, Just wanted to share a workaround I made today while trying to increase the performance of tilemaps in my game. My game has maps that could be 2048px X 2048px (64x64 32px X 32px tiles) or maybe even bigger down the road, and contain up to 8 layers for applying detail. The problem I ran into was, when scrolling the camera, I was seeing huge performance drops, even on powerful computers. Turns out, Phaser was redrawing the tilemap every frame you move the camera. My tilemap, after being loaded, never really changes. So I wanted to find an easy way to force Phaser to draw the entire tilemap once and then use it for a static sprite after that. I tried using https://photonstorm.github.io/phaser-ce/Phaser.TilemapLayer.html#cacheAsBitmap, but it didn't seem to work. Not sure if I was missing something there. So my solution was to resize the layer before getting the texture: myLayer.resize(game.world.width, game.world.height); myLayerTexture = myLayer.generateTexture(1, PIXI.scaleModes.DEFAULT, game.renderer); myLayer.visible = false; game.add.sprite(0, 0, myLayerTexture); this way, instead of the tilemap being added as a dynamic thing that gets redrawn constantly, it functions as a static image. But because each layer is still treated as a separate image, I preserve rendering order. In the background, I keep the actual layers hidden to preserve collision data. Unfortunately, if the tilemap were to change ever beyond initial creation, the texture would need to be updated, which would be expensive. But since I'm not really planning on doing that, it seemed like a reasonable solution to me. Hope this helps someone else who has this problem.
  27. 2 points

    Tutorial Talk

    @Pryme8 if you have already read these http://doc.babylonjs.com/resources/hiding_editor_lines http://doc.babylonjs.com/resources/pbt_slider http://doc.babylonjs.com/resources/pbt_writing http://doc.babylonjs.com/resources/pbt_previous_and_next Then you will need to ask me a specific question but please do not expect a quick response as I am a little busy at the present. Will have more time from Tuesday next week.
  28. 2 points

    More than 4 lights?

    @MarianGthis also got me. @DeltakoshThanks for the very nice clear answer. @Wingnut was a big help when lights stopped at 10 a year back... with various lighting experiments (kudos +1, thx). Disco ball is a classic. And prior ones great too. <JOKE removed>. @NasimiAsl, 3Dbomberman is great. Much better than the original.
  29. 2 points
    OK to update: I've now managed to make a stand alone exe on the mac with Electrum. It was like some DOS based nightmare from the 1990s. Here is what I did: Follow the Electrum quick start guide until you get something to run in a window. What you get to run is of NO USE as it isn't an exe. Then Electrum sort of just trail off about how to make that an exe. Really weird. However someone on stackoverflow pointed to: https://www.npmjs.com/package/electron-packager Which is another command line nightmare but it DOES make an exe for Mac, Linux and Windows in one go. Here is the install process (it needs admin/root access): ---- npm install electron-packager --save-dev Then the following as sudo, you will need admin password: sudo npm install electron-packager -g Then follow the guide WITHIN YOUR electron-quick-start dir: Rename the dir from 'electron-quick-start' to your app name. Make sure electron-packager is installed globally (sudo npm install electron-packager -g should have done that) productName in package.json has been set to your app name (edit it with a text editor) The electron module is in the devDependencies section of package.json, and set to the exact version of 1.4.15. (edit it with a text editor) npm install for the Foo Bar app has been run at least once (I just ran 'npm install' from the command line once) Now run: electron-packager . (with the full stop) ----- AND BEHOLD an exe which runs and compresses to 44MB. Wow. Just wow. There is serious room for a desktop one click app for this, because I don't think any newbie is going to be able to do all that.
  30. 2 points

    More than 4 lights?

    I think 8 is ok. But I seem to hit a wall at 11. 10 or under... let's party! (in FF 52 ESR) errr... something. https://www.babylonjs-playground.com/#IRVAX#64
  31. 2 points

    A way to create road on ground

    If i may add, Terrain material: http://doc.babylonjs.com/extensions/terrain https://www.babylonjs-playground.com/#E6OZX#7
  32. 2 points
    Hi, I took @NasimiAsl's wonderful (!) result and used a newly introduced function (getFrontPosition) to get the target and ray correctly - https://www.babylonjs-playground.com/#2GXKNW#25 . This will also prevent this drag that appears sometimes.
  33. 2 points

    scene.onPointerUp firing twice.

    The right way to go would be this - http://www.babylonjs-playground.com/#36TFT6#14 onPointerUp is amazingly useful, but technically deprecated. The type is not broadcasted there (thou I see no reason not to do it, honestly. I will add type later as a 3rd variable for people still using this function)
  34. 2 points

    cancer awareness program

    i did this for one for a medical project using the awesome babylonjs and its smooth gui https://carboplatin-cisplatin.yolasite.com/
  35. 2 points

    [Phaser] 3anglez

    Related to mp3 issue, maybe you want to read this, as I think we can already use it for free since half a year ago. https://www.vox.com/culture/2017/5/29/15653564/the-mp3-not-dead-license-expires-free
  36. 2 points

    Chrome iOS

    Glad that Vorlon helped you This seems to be really browser related and may need to file a bug in Chrome bug database. perhaps you can try to manually force the canvas.width and height to the value of the layout? And then call an engine.resize() ?
  37. 2 points

    Hybrid apps vs. C# and Unity.

    It's admob, adsense version for mobile. I used this cordova plugin - admob pro: https://github.com/floatinghotpot/cordova-admob-pro
  38. 2 points

    Changes for Blender exporters

    @V!nc3r, 5.6 is commited. I did not touch materials. With Blender 2.80, I have the feeling materials are going to need a lot of changes. Not going to do it twice. Use the other exporter if PBR is needed, or code it on the BJS side.
  39. 2 points

    Exporter for ProBuilder

    Using Standard Material Pipeline With no changes works (because just basically exporting standard diffuse workflow with texture/normal/colors etc..) I will be looking into as much ProBuilder specific Material Properties I CAN MAKE USE OF, IF ANY... But worst cast the Standard Material pipeline is working pretty good... if pro builder has PBR features, I will have try add that support, until then materials will be exported as BABYLON STANDARD MATERIAL Example:
  40. 2 points
    ok, this is my quick attempt, a very basic, minimalistic, no-config boilerplate forked from the widely used full example project of @nkholski, merged with the minimalist template of @rich (which didn't included ES6 babel transpilation): https://github.com/pixelhijack/phaser3-es6-webpack. If @Ppozniak you are ahead with a clean one, ignore this, if you can use, let me know. We would better end up with only one, official, then yet another
  41. 2 points

    GUI TextBlock flick on addControl

    PARTY!!!! Thx for the kind words/thoughts, Fm! And thx for the fast holiday troubleshoot/fix, DK! The enthusiasm is pretty high and very contagious... in the forum's user-base. It's like... our job... is testing/tweaking "fun". I wish every job was so delightful. BabylonJS has a way of adding "Hey, maybe I CAN do this" to any person's project-dream. Enthusiasm. "thooze". BJS brings out the "thooze" in people. Then it drips all over the forum. It has something to do with spinning colored mesh - it does something to people. Sort-of... Fisher-Prices them. Mentally, they travel back to the playpen, age 1, staring at mobiles, playing with cubes, and drooling in fascination over everything. We have a TEAM of janitors that mops-up the drool around our playground... caused by BJS scenes. Users--- drooling over the pretty shapes and colors. It's a fun place to hang-out... but wear your boots.
  42. 2 points

    Cryptocurrency as a game reward

    The problem with bitcoin as it currently stands are the fees per transaction which would make such rewards pointless / or costly whichever side. Lightning network may help a lot in regards to this. Another solution is to use a dedicated alt currency (there are several) or create your own with low fees and fast transaction speeds. People would trade them vs BTC to cash out as they do with alt coins trading. Offering 1 BTC as unique reward for the first player to beat the game (or create a more elaborate reward structure) is not such a bad idea. Last year I actually wrote a short blog article about a digital artist, she embedded private keys to bitcoin stashes in her paintings. Her last puzzle has yet to be solved but surely, should the reward be substantial enough (4.5 BTC in her case), it is a great way to get exposure, especially these days with cryptocurrencies all over the news.
  43. 2 points

    Compiling latest bjs

    I did a hard reset to the repo and didn't notice it (naturally) deleted my node_modules folder. npm install solved this of course. Thanks
  44. 2 points

    Uglify for ES6

    I have begun migration of all my stuff away from Eclipse back to Netbeans. The support for the Eclipse Typescript add-in has not worked for a while. I have been using Gulp to actually do any building. Netbeans editor for Typescript is much better, & importantly being updated / improved. Cordova projects is also nicer. I always use Netbeans anyway until I needed to work with Typescript. Eclipse was very early out of the gate. with Typescript. While Netbeans does gulp commands from a cascading menu, since the typescript editor relies on a tsconfig.json file, I wanted to move away from gulp. Netbeans also runs npm scripts (in a scripts collection in a package.json file) from a menu as well. I only really need one liners like "tsc" & "uglifyjs". I was intending to transpile to ES6 (do not care about ie11), so I need an uglify which supports it. By far the most downloaded Uglify is https://www.npmjs.com/package/uglify-js. It notes that you should use https://github.com/mishoo/UglifyJS2/tree/harmony for ES6. The first thing I noticed is this repo link is not the master branch, hence the question, is it just a little too early for es6? Has anyone used this?
  45. 2 points
    This is actually part of the learning experience, googling a subject and being able to pick the good from the garbage. The problem is that most people writing about beginner subjects aren't much past the beginner level themselves so the info can be a little inconsistent or even incorrect. There is actually a double problem here for the web: because web tech develops at such a fast rate a lot of stuff goes out of date quickly. https://developer.mozilla.org/en-US/ MDN is a go-to resource. The W3C website has some similar resources but it isn't as well written or updated, plus its sometimes just inaccurate, but you will likely come across it. Just google for blogs and other resources, you'll often stumble across a few content creators you like, make sure you get a feed of their blogs and following them on twitter is a good idea. https://www.smashingmagazine.com/ is usually consistently high quality, although I haven't looked at it for a while and not sure how much beginner stuff it has. Not a gaming resource though. https://github.com/getify/You-Dont-Know-JS is a fantastic resource and Kyle Simpson is an incredible developer, its not a gaming slant but a fantastic JS series of books. That last one is a github link, once you get beyond the real beginner stage you'll need to be looking through any source code you can find, many people who shout about their games here also provide links to their github source code. This is extremely daunting at first though, so probably not that useful when starting out. In a similar vein, when you get going you'll probably want to start using third-party modules and import them in to your code. NPM is one such repository of packages (there are millions). You'll find that pretty much everything there is open source and will contain links to the source code. Once you get in to that you'll find you see the same names of people churning out modules, read their code, if they have blogs read them. Again, this is extremely daunting at first so tackle it later.
  46. 2 points
    Ok! next commit will introduce a BABYLON.Texture.UseSerializedUrlIfAny = true;
  47. 2 points

    CellShading post-process

    Can you use LUT? This PG is not what you're looking for, but can you make a LUT to simulate cell shading? https://www.babylonjs-playground.com/#J9H084#19
  48. 2 points

    Rotation problem of gltf meshes

    Thank you Wingnut and Sam for your quick replies. Quaternion is a brilliant solution although I still need to dig deeper into the math. PS: I'm so glad to join this forum and appreciate the warming welcome!
  49. 2 points
    Hey Guys! I just created a very simple physics editor since the one we use commonly gets paid and it's only free for a while. The truth, as I said, is very simple, just add the image, the groups of polygons needed for that image and then in each group we can add individual polygons at the position of the cursor with the key [1] to make it easier and fast. After this we export and ready. Here are some pictures: WEBSITE If there is a problem or something that should be taken into account to improve this system, I would appreciate it if they told me. Regards!
  50. 2 points
    There are quite a few threads on this that might be helpful, try searching the forums. I think there are a couple of quick things to think about though: * Coding is really hard. It is very rewarding (and fun) but quite difficult, be prepared to invest time and effort in to it (you may already be there on that!). * HTML5 makes things a little trickier as you have to consider JS, CSS and HTML. If you're coding canvas-based games (as most here do) then it's 99.9% JS. * You'll need to do plenty of reading (or listening) but get your hands dirty, write as much code as you can, solve problems in that code, dive into those problems. This probably means you won't get anything finished very quickly but it will mean you have a much much much better chance of getting things finished in the future, have an end goal in mind for a project but I wouldn't worry if you don't make it first time, what often happens is: Have an idea for game -> write some code -> find issues in the code -> dive into the issues and really learn -> have another idea for a game -> rinse -> repeat. At some point you need to be finishing things, but, not so much when you're learning, its more important to do some deep dives than skim over some complexity only to get things finished (totally opposite if you're earning money from it). * Ask lots of questions. Find a mentor if you can, but places like this forum can substitute for a human on the end of a phone or face to face. * If there are community JS meetups in your area try to attend them. Try to attend a conference with some topics you're particularly interested in (although this can get expensive). Both of these help to put faces to names and most speakers and people at meetups are very friendly, everyone is in the same boat, or, if they're in a more advanced boat now, they were in your boat before. The coding (and JS in particular) community is an incredible thing, its biggest asset, make use of that and be a part of it. Remember to give back when you make your way to 'Expert Coder' level. * Be wary of that 'Expert Coder' label I just used, its garbage! Always be learning, always be moving forward. This is true of any science but seems to be doubly true of JS and Web programming. * Be determined, its a hard road, lots of problems to solve, but keep going, the hill is steep at first but it flattens out a little as your knowledge improves, then ramps up again.