How to build Friday Night Funkin' (FNF) for web

How to build Friday Night Funkin' (FNF) for web

Steps to compile FNF game for web using source code.

If you're a fan of rhythm games, chances are you've heard of Friday Night Funkin'. This indie game has taken the gaming world by storm with its catchy tunes, colorful graphics, and challenging gameplay.

While the game is available to play online or download, many players have discovered the benefits of compiling the game themselves.

Compiling the game may sound intimidating, but it can actually enhance your gaming experience in a number of ways. In this blog, we'll explore why you should consider compiling Friday Night Funkin', and how to do it yourself.

So get ready to bust a move and level up your gaming skills!

Setting up

  1. Install Git

    Download and install git-scm. It will help us fetch the game's source code and some other add-ons.

  2. Launch a terminal/command-prompt.

  3. Install Haxe

    Install the Haxe programming language and runtime by downloading the installer from https://haxe.org/download/version/4.1.5/ . At the time of writing this post, the game was supporting the 4.1.5 version only. This might change in the future. Refer to README.md

  4. Install HaxeFlixel

    Close the current terminal and launch another one. Then run the following commands one by one in order.

     haxelib install lime
     haxelib install openfl
    
     haxelib install flixel 4.11.0
     haxelib set flixel 4.11.0
    
  5. Install lime and flixel to commands to the path

    We have already installed lime in the previous step. We just need to set it in our path. Run the following to do so. Accept / Press Y + Enter if prompted to update the path.

     haxelib run lime setup
    

    To setup flixel we need to install flixel-tools.Run the following commands to install and set up. Again, Accept / Press Y + Enter if prompted to update the path.

     haxelib install flixel-tools
     haxelib run flixel-tools setup
    
  6. Install other libraries required by the game.

    1. flixel-ui

       haxelib install flixel-ui
      
    2. hscript

       haxelib install hscript
      
    3. newgrounds

       haxelib install newgrounds 1.1.5
       haxelib set newgrounds 1.1.5
      
  7. Install polymod

     haxelib git polymod https://github.com/larsiusprime/polymod.git
    
  8. Install Discord RPC

     haxelib git discord_rpc https://github.com/Aidan63/linc_discord-rpc
    
  9. Download Source

    To get the game's source code, we have to clone the repository on our local computer using the below command.

     git clone https://github.com/FunkinCrew/Funkin.git
    

    There is an issue between song transitions and zoomed-out cameras. This can be fixed by running the below command.

     haxelib git flixel-addons https://github.com/HaxeFlixel/flixel-addons
    

Testing

Hurray!! Now we have all the tools as well as game source code on our machine.

Switch to code directory.

cd Funkin

Run the below command to launch the game in the browser.

lime test html5 -debug

You should be able to see the game running in your default browser. If you encounter a black screen then try to clicking somewhere in one game area. It should work after.

Release Build

Debug builds contain extra code, markers, and logs to make debugging easier during the development of a game.

In a live web environment, we would want a thin and optimized code running in the browser for everyone. To generate a release build, run the following.

lime build html5 -release -clean

Now, all the required HTML, CSS, JS, and all assets will be available inside export -> release -> html5 -> bin folder of the source code.

Play around with build different options and compare bin folder's size.

Try to change images / texts as you like and share your Modded FNF with the world https://www.fridaynightfunkin.net/friday-night-funkin-mods-fnf-play-online/

(The above steps were tried and tested on macOS These steps should work as it is in Windows and Linux as well, as long as we are trying to build for web. If you face any issues please drop in a comment)