Leaderboard


Popular Content

Showing content with the highest reputation on 10/31/18 in all areas

  1. 2 points
    Bikas

    Postmortem: Adventure Drivers

    Hello! Adventure Drivers is my second HTML5 game after Medieval Defense Z. My main work went into engine, tools, code and levels and the art was done by Gudo1. I can share some of the details of what went into making this game. I also wrote a postmortem about my previous game Medieval Defense Z which you can check it here: http://www.html5gamedevs.com/topic/28332-postmortem-medieval-defense-z/ About Adventure Drivers - 60fps 2D racing game. - Written in Haxe. - Used Pixi v4, Howler and Nape Physics Engine. - Over 50k lines of code. Visual Assets All the visual assets were in flash SWF files and i needed to get sprites into spritesheets. Exporting hundreds of assets to PNG's by hand was too time consuming, so i wrote a command line tool in Adobe Air which takes assets from SWF files, applies transformations such as scale or rotation and exports all movie clips as images to a single graphics folder. The tool also creates XML file which has the animation data and anchor values for every image. Then i used TexturePacker command line tool to pack everything into a single spritesheet. For bitmap fonts i used Littera and packed font PNG's into the main spritesheet. After loading .fnt file i had loop over all chars and add x and y offsets based on the location of the font texture in the main spritesheet. Audio Assets Audacity and ffmpeg worked really well. Audacity for quick sound editing and ffmpeg for converting between various formats. Like in Medieval Defense Z i chose M4A for iOS and OGG for android and PC. Batch script to convert all WAV files to OGG (64 bit rate): for %%i in (*.wav) do ( ffmpeg -y -i "%%i" -codec:a libvorbis -qscale:a 4 -ac 1 "%%~ni.ogg" ) Batch script to convert all WAV files to M4a (64 bit rate): for %%i in (*.wav) do ( fdkaac -b 64k -o "%%~ni.m4a" "%%i" ) Editing in Audacity: Fade In/Out, Amplify, Normalize, Change Speed and Equalization were the most useful tools/functions. Level Editor Used my own editor written in Action Script 3 which is basically a general purpose non-tile based 2D object placer with prefabs, grouping, undo/redo, etc. In order to create levels faster i also used Perlin Noise algorithm for terrain generation and procedurally placed decorations. After generating the level i still had to cleanup decorations, adjust terrain, add caves, place obstacles and items. For saving to files i wrote a simple NodeJS server in Haxe and used POST to send and receive data which then is saved to disk. Physics Nape Physics Engine was great until i needed to run my game on mobile... Dynamic polygons became a real drag on CPU and i needed to simplify geometry in order to have any gains in terms of performance. Weirdly enough the terrain size was not that influential as much as adding 1 more car. Also there was this weird issue with inlined code. Inlined code ran SLOWER in chrome than non-inlined... It was especially noticeable then physics engine caused large lag spikes. I noticed the same problem in Medieval Defense Z and large functions. I could not find anything online, so i disabled inline and split some of the large functions into smaller ones. Frameworks and Rendering At first i used Phaser framework but the performance issues were never ending. The transform updates were a major bottleneck so i had to pretty much hack around and disable portions of the framework until i was just using basic Pixi sprites and groups. Thankfully i didn't use much of any other stuff from Phaser (no camera, no physics, etc.) which made it easier to transition to Pixi v4. One of the biggest issues was the terrain drawing. Phaser does not have any equivalent for large mesh rendering with exception of using tiles and masks which are very slow. So i needed to write a complicated set of functions to cut the terrain into thousands of rectangles and add them to the stage during gameplay. After converting to Pixi v4 i simply used pixi Mesh object and EarCut library for cutting polygon into a triangles. This was about 10x simpler to implement and it improved the performance. For Canvas i still needed to hack around and use pattern fill in Phaser and in Pixi. Sounds Different js sound libraries had a major difference in performance. Phaser sound library was quite good, however it did not have .rate property which i needed for the car engine sound, so i used 2 different engine sound loops with different rates and changed volume based on driving speed. I tried Pixi sound library but it had incredibly poor performance on mobile and was basically unusable even though this library had really nice features. Ended up with Howler which has the ability to set .rate and the performance was really good. Also Pixi v4 + Howler did not crash my old android device which was nice. Bots The AI code can be broken down in 3 steps: data gathering, decisions and actions. In data gathering step the bot collects and processes information. For example: how long back and front wheels are on the ground or in air, how the rotation changed in the past second, average speed, etc. Decisions are made in timed intervals and they depend on the "personality" of the car which i describe in 4 values: "ability", "aggression", "craziness" and "panic". The bot "decides" only if all conditions are satisfied. The decisions include: air rotation, ground rotation, random_rotation, random_jump, flip, wheelie, nitro, jump_over, jump_pickup and use_ability. For some of the decisions the bot also has to check nearby items and other cars. The last step is "action" which simply means that the bot performs a function for a limited time unless some unexpected thing occurs. So the bot will stop the air flip action if any of the wheels interact with the ground. Backgrounds I wanted to do something interesting with the backgrounds so i decided to try pseudo 2.5D background scrolling stuff to see how it goes. The waves looked really nice so we went with it. If you want to do something similar, the function you are looking for is this: public static applyProjectionWithCamera(to_projection:Point, eye:Point3, camera:Point3, point:Point3):Point{ to_projection.x = (eye.z * (point.x + camera.x - eye.x)) / (eye.z + (point.z + camera.z)) + eye.x; to_projection.y = (eye.z * (point.y + camera.y - eye.y)) / (eye.z + (point.z + camera.z)) + eye.y; return to_projection; } Eye has fixed x = 0, y = 0 and z = 800 values. Camera x, y, z values are tied to the game camera which is tied to the player position. Each sprite has 3 3D points (triangle) associated with it and these points are placed somewhere in the background with high z value (distance), varying x value (horizontal) and high y value (vertical) for the clouds. Then i calculate 2D points (projections) for every 3D point. And set x, y, width and height for the sprite based on the 3 projected points. The Game For now we are doing a limited release on few websites and the game should playable very soon. If you found this post useful let me know.
  2. 1 point
    mapacarta

    [Phaser 3] Chase of Boxes

    I released a new platformer game yesterday. It is a little game, I couldn't find much time since I started working full time a month ago. Hope you like it: https://www.kongregate.com/games/mapacarta/chase-of-boxes Any feedback is appreciated. Because I don't have much time to work on new ideas these days, I am thinking about making small platformers like this one in the future.
  3. 1 point
    SunOfABeach

    Battleship - raw HTML game

    I made a classic battleship game that you can play against others or an AI. To challenge myself, I did it without any game framework, not even canvas. Just raw HTML5 element manipulation. It's also fully responsive and mobile first. http://www.battleship-online.com The code: https://github.com/Sun0fABeach/battleship_online
  4. 1 point
    Печально. В любом случае спасибо! И спасибо за Ваш вклад.
  5. 1 point
    Hi, If I create animation this way: myanim = scene.add.sprite('myanim'); scene.anims.create({ key: 'myanim', frames: scene.anims.generateFrameNumbers('myanim', { start: 0, end: 20 }), duration: 1000, hideOnComplete: true }); .. and later I want to change it's duration or frameRate - how to do that? I try this, but no luck: myanim.anims.duration = 3000; myanim.anims.frameRate = 15; myanim.anims.currentAnim.duration = 3000; myanim.anims.currentAnim.frameRate = 15; Animation still runs with the initiall duration.
  6. 1 point
    Deltakosh

    Can I dig a hole in one side of a box?

    Did you check the csg feature? https://www.babylonjs-playground.com/#T6NP3F#0
  7. 1 point
    samme

    Change animation's duration or frameRate

    sprite.anims.msPerFrame = n;
  8. 1 point
    Иван привет! Совершенно непонятно, каким образом можно модифицировать чужой движок, без понятия, как там все работает - ну открыл я код, и? Какой цикл, для каких hole, где это вообще размещать, какие MOVETo добавлять, это первое. Второе, каким образом потом это все заливать и куда. Ну и наконец - даже если это все прокатит, это видимо пройдет только в след релиз, ну или сидеть с кастомным движком, не из коробки. А нужно прямо здесь и сейчас. Неужто других , готовых, нативных способов нет? Движку уже сто лет, а дырку в графике нарисовать нереально, really ???
  9. 1 point
    Wolfsbane

    Battleship - raw HTML game

    I feel like having single square ships is a mistake. Part of the decision making in battleships is judging the likelihood of where a ship might be... meaning you can try different shot patterns, and skip certain squares/corners, because you know it won't fit there. Now it's just blind luck with one square ships. Otherwise, works well. If this was made as a challenge, how long did it take to make, may I ask?
  10. 1 point
    JCPalmer

    Inconsistent animation speed

    First, to be clear, the animations are on each of the bones not the skeleton. I would check the .log files to see if either the skeletons a have an action assigned / exported. Would look like this for RUN: If this export had an AnimationRange copied to it, the FPS in the bones would from the avatar blend. I manually changed the the FPS of the first bone of each. Looks like that synced the root bone. Either delete the strays actions or make sure the avatar .blends match on FPS
  11. 1 point
    Jerorx

    Tutorial requests

    I have updated the first post with the latest requests as well as with the links @jamespierce has provided! Sorry for delay in doing so, I hadn't noticed that the topic had been moved and pinned and had thus gained a bit in popularity! I'll check more diligently from now on. I have also added a link to a small demo and tutorial I made addressing @B3L7's request about localStorage. @kudefe, I have summarized your request as "text-based adventures", let me know if you think it's not accurate!
  12. 1 point
    @hcmetal turns out I was able to add a custom attribute to the materials to allow toggling AlphaTest during export. I just pushed an update to the 3ds Max exporter which supports this. Feel free to give it a try. To enable the alpha test toggle, you will have to set a "babylonAlphaTest" boolean custom attribute on your materials. Setting this to true will enable alpha test mode. You can use this script for reference: https://github.com/BabylonJS/Exporters/blob/master/3ds%20Max/MaxScripts/BabylonMaterialAttributes.ms Let me know if you have questions on this.
  13. 1 point
    Nodragem

    Is Babylon.js for me ?

    Yeah! Let's break everything @Deltakosh Concerning the compatibility issues with the PGs, you could add a droplist where the devs/users could select if their PG is to be run with BabylonJS 3.x or with BabylonJS 4.x. For instance, as Python 2 and Python 3 are both used in data science, jupyter-notebooks would let you start a notebook with whichever version. You can have a look here, Go in File/New Notebook or in Kernel/Switch Kernel: https://hub.mybinder.org/user/ipython-ipython-in-depth-ry7uv1oa/notebooks/binder/Index.ipynb The online jupyter-notebooks only have Python 3 installed, but I can swear that if you have both versions, you can switch. @GrosSacASacs I started to use BabylonJS recently, and my feeling is that it has a lot of potential, but it might miss few things to be easily scalable for a Big Big game. But at the same time, the community is great and the devs are nice, so the ideas you have to make the engine better and scalable will probably be heard, discussed and implemented. Some times they just get implemented straight away. This opportunity to be at the heart of the development loop is something you won't find in Unity or Unreal (too many people). Also, maybe more than the engine, it is also the game developer who needs to write scalable code ! I let you know how it goes for me (fingers crossed!). I was actually wondering how I was going to do that Just discovered we could have several scenes! this PG rocks: https://www.babylonjs-playground.com/#MXCRPS#1
  14. 1 point
    Hey everyone, It seems that sounds are accumulating when the game isn't focused. So when i click to another page for example, the sound of the game mutes, but when i click back to the game all the sounds that happened while it was muted seem to play all at once. Before this I think I was making it worse by not having sounds assigned to variables. So originally I was doing this whenever I needed a sound to play : this.scene.sound.play('sound'); the sound seems to be more consistent now that I also assign the sound to a variable and call play on the variable instead: this.sound_gunshot = this.scene.sound.add('gunshot') // gunshot already this.audio.load -ed this.sound_gunshot.play(); However, the problem still stands regarding sounds not being consumed when the game isn't focused. Any ideas about this? Thanks in advance for your time. EDIT - sorry I dont think this is actually an issue. Either it was just needing to change the way the sound was played, like above, or it was that I was using game.sound.add in one place instead of scene.sound.add. Either way I can't say that the problem is noticeable. Feel free to delete the post (don't think I can myself).