{"id":84,"date":"2022-07-04T23:46:13","date_gmt":"2022-07-05T04:46:13","guid":{"rendered":"https:\/\/blog.profdelevante.net\/?p=84"},"modified":"2022-07-04T23:46:13","modified_gmt":"2022-07-05T04:46:13","slug":"haxeflixel-step-by-step-installation-guide","status":"publish","type":"post","link":"https:\/\/blog.profdelevante.net\/?p=84","title":{"rendered":"HaxeFlixel step by step installation guide"},"content":{"rendered":"

HaxeFlixel is a 2D game engine designed to work with the Haxe programming language. HaxeFlixel is therefore a robust platform that allows for singular code to be natively compiled in a variety of different programming languages. In this post you will learn how to install HaxeFlixel in your computer and how to start making games with it on the Visual Studio Code development environment.<\/p>\n

Games developed with HaxeFlixel can be compiled to work on iOS, Android, HTML 5, Flash and more. Haxe has been used to make award winning and commercially successful games like Northgard<\/em>, Papers, Please,\u00a0<\/em>and the popular indie-game Friday Night Funking<\/em>. This guide with pictures will cover the installation process of the HaxeFlixel game engine using VS Code.<\/p>\n

Install Haxe<\/h2>\n

The installation of HaxeFlixel begins with the installation of Haxe, the base programming language. Haxe is open-source and available for free to use by anyone. You should be able to find the latest version online by going to the Haxe website: https:\/\/haxe.org\/download\/<\/a>. For this guide we will be using a Windows-64 bit installation, but you should download the package appropriate to your Operating System. Run the installer and follow the prompts until the installation of Haxe is complete.<\/p>\n

\"The
Fig. 1. Installation wizard of Haxe on a Windows computer.<\/figcaption><\/figure>\n

Once the installation is complete you may need to restart your computer before proceeding.<\/p>\n

Install HaxeFlixel<\/h2>\n

The installation of HaxeFlixel is done through an elevated command prompt. Use the sear tool in Windows to fund cmd.exe and run it as an administrator. You should get a command window like the one shown next.<\/p>\n

\"Cmd
Fig. 2. Command window ready for command input.<\/figcaption><\/figure>\n

The first command that you need to run is<\/p>\n

haxelib install lime<\/span><\/pre>\n
Type the command into the command window and then press enter. The command window will take a while to start your command and then you will see progress until it is successful. Now you have to install Open FL, type the following command into your command window.<\/p>\n
haxelib install openfl<\/span><\/pre>\n
Again the system will run the command and install Open FL in your computer. You should see something close to the following progress bar.<\/p>\n
\"Installing
Fig. 3. Command window during the installation of Open FL.<\/figcaption><\/figure>\n
You should now install Flixel using the following command:<\/p>\n
haxelib install flixel<\/span><\/pre>\n
We should now install additional libraries and examples using the following command:<\/p>\n
haxelib run lime setup flixel<\/span>\r\n<\/pre>\n
The Command window will take a while to download and install the additional packages. Once it is done, setup lime using this command:<\/p>\n
haxelib run lime setup<\/span><\/pre>\n
We are not done with the Command window yet so don’t close it, but before proceeding make sure lime is installed by typing lime as a command.<\/p>\n
\"Lime
Fig. 4. A successful installation of lime.<\/figcaption><\/figure>\n
Testing Lime in Visual Studio Code<\/h2>\n
We are now going to test that lime is working properly by running some examples in Visual Studio Code, open the IDE. Create a new project, give it any name you want and then open a command terminal. To open a new terminal you can click on the menu “Terminal” on the top of the IDE and then select “New Terminal”.<\/p>\n
\"Creating
Fig. 5. Navigating the Terminal menu to open a new terminal.<\/figcaption><\/figure>\n
Most likely, Visual Studio Code will open a PowerShell terminal instead of a Command Prompt, make sure you change the terminal by selecting the arrow next to the plus sign on the terminal window and selecting Command Prompt from the dropdown menu.<\/p>\n
\"Switching
Fig. 6. Switching to a Command Prompt terminal with Visual Studio Code.<\/figcaption><\/figure>\n
Now that you have a Command Prompt you can input the command to create one of lime’s included examples. We will use the SimpleImage example in this tutorial. Input the following command:<\/p>\n
lime create SimpleImage<\/code><\/pre>\n
This will have created a new folder in your system with the name “SimpleImage”, it is filled with the example files. Go into this folder with the following command:<\/p>\n
cd SimpleImage<\/code><\/p>\n
Now that you are inside the folder you can test lime’s compilation into different languages. Let us test html5. In order to test html5 we just need to run this command:<\/p>\n
lime test html5<\/code><\/p>\n
After a little while, the program will compile and a new window in your web browser will open with the following image:<\/p>\n
\"Simple
Fig. 7. Test of SimpleImage in HTML5, opens in a new web browser window.<\/figcaption><\/figure>\n
Here are some other tests that you can do. Please notice that flash is no longer supported by current web browsers.<\/p>\n
lime test <\/span>html5 -Dcanvas\r\nlime test <\/span>html5 -Ddom\r\nlime test <\/span>neko\r\nlime test <\/span>neko -Dcairo\r\nlime test <\/span>flash<\/code><\/pre>\n
Configuring lime for different platforms<\/h2>\n
We are done with VS code for the time being. Go back to your elevated Command Window. We will now setup lime to work with some additional platforms. First we will set it up to work with MS Windows. Input the following command:<\/p>\n
lime setup windows<\/code><\/p>\n
If you are already in Windows, the Command Prompt will relay a message explaining that you only need a Visual Studio C++ Compiler, you got one when you installed Visual Studio Code, so you should be fine. You can now configure lime for Mac and Linux using the following two commands:<\/p>\n
lime setup linux\r\nlime setup mac<\/code><\/pre>\n
You can also configure Android and iOS compilers by running the following two commands:<\/p>\n
lime setup android\r\nlime setup ios<\/code><\/pre>\n
Please notice that iOS is only supported on macOS. This tutorial is for Windows computers so the configuration of lime for iOS will not be covered here. You can read about it in this page: lime.software – Setup iOS<\/a>.<\/p>\n
lime setup for Android<\/h2>\n
In order to setup android you need the appropriate Android development tools. You can get these tools by downloading and installing Android Studio from this webpage: https:\/\/developer.android.com\/studio<\/a>. You may also need to download a Java JDK, there is one included with the Android Studio installation. The lime setup will prompt you for the path to your Android SDK, you can get that patt during the installation process, right before you commit to install.<\/p>\n
\"Android<\/a>
Fig. 8. Verify settings window, you can get the paths to both the Java JDK and the Android SDK from this window.<\/figcaption><\/figure>\n
Something else that you are going to need is an up-to-date installation of the Android NDK. You can install the NDK from within Android Studio. In order to do that open a new project and go to the Tools menu, and click on the SDK Manager option.<\/p>\n
\"SDK
Fig. 9. Opening the SDK Manager to install the NDK.<\/figcaption><\/figure>\n
There, navigate to SDK Tools and check “NDK (Side by side)” option and click Apply. A new window will pop-up the software will be downloaded and installed. Make sure that you also install “Android 4.4 (Kitkat)” from the SDK Platforms tab.<\/p>\n
\"Preparing
Fig. 10. Installing the NDK using Android Studio.<\/figcaption><\/figure>\n
Once the installation is complete the SDK folder will contain a new folder named “NDK”, inside you will find a numbered folder. The numbered folder is the NDK folder that you must supply to lime setup.<\/p>\n
Installing and updating HaxeFlixel tools<\/h2>\n
Now that lime is installed and configured you can add some new tools to your installation of HaxeFlixel with the following commands:<\/p>\n
haxelib install flixel-tools<\/span>\r\nhaxelib run flixel-tools setup<\/span><\/pre>\n
When asked to set the flixel command alias make sure to input yes.<\/p>\n
You should keep HaxeFlixel up to date. You can run this command to update it:<\/p>\n
haxelib update flixel<\/span><\/pre>\n
And that is it. Your installation of HaxeFlixel is complete.<\/p>\n
HaxeFlixel’s “Hello World” example<\/h2>\n
We will run a very simple example following HaxeFlixel’s very own “Hello World” tutorial, which can be found here<\/a>. Create a new folder and open it in Visual Studio Code, you may name it however you like, try “Projects”. Now open a Command Prompt terminal and input the following command:<\/p>\n
flixel tpl -n <\/span>\"HelloWorld\"<\/span><\/pre>\n
This command will create a new folder named “HelloWorld” populated with all the base files that HaxeFlixel needs to run. Visual Studio Code will also open a new window with this folder at its base. It is now good moment to create a git repository and push it to GitHub, if you are so inclined.<\/p>\n
Open the file “PlayState.hx” that is inside the source folder. And paste the following lines right below “super.create()”<\/p>\n
\n
\u00a0 \u00a0 \u00a0 \u00a0 var text = new flixel.text.FlxText(0, 0, 0, “Hello World”, 64);<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 text.screenCenter();<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 add(text);<\/div>\n<\/div>\n
Text like this is known as FlxText. In order to run the code you must run lime from within the folder that contains the file named “Project.XML” which details all the dependencies of your project. Make sure to save your files before proceeding.<\/p>\n
\"Hello
Fig. 11. Playstate.hx has been modified to include the FlxText for Hello World.<\/figcaption><\/figure>\n
Open a new terminal inside the HelloWorld folder and test it targeting different platforms. Try HTML5 first, use the command: lime test html5<\/p>\n
\"Hello
Fig. 12. Hello World rendered in HTML5 from HaxeFlixel.<\/figcaption><\/figure>\n
Now, let us try neko. Press Ctrl+C to cancel the currently running command and then use this command: lime test neko. A new window should pop-up with the program running. Notice that there is sound.<\/p>\n
\"HaxeFlixel-HelloWorld-neko\"
Fig. 13. Hello World with HaxeFlixel now targeting neko.<\/figcaption><\/figure>\n
You may try other platforms, but please notice that Flash has been discontinued and unless you have a Flash Player configured to run .swf files automatically lime will just stop the execution of that test.<\/p>\n
This concludes the tutorial.<\/p>\n","protected":false},"excerpt":{"rendered":"
HaxeFlixel is a 2D game engine designed to work with the Haxe programming language. HaxeFlixel is therefore a robust platform that allows for singular code to be natively compiled in a variety of different programming languages. In this post you will learn how to install HaxeFlixel in your computer and how to start making games […]<\/p>\n","protected":false},"author":1,"featured_media":97,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[15,39],"tags":[38,17,23],"class_list":["post-84","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-coding","category-english","tag-haxeflixel","tag-visual-studio-code","tag-vs-code"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/blog.profdelevante.net\/index.php?rest_route=\/wp\/v2\/posts\/84","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.profdelevante.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.profdelevante.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.profdelevante.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.profdelevante.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=84"}],"version-history":[{"count":2,"href":"https:\/\/blog.profdelevante.net\/index.php?rest_route=\/wp\/v2\/posts\/84\/revisions"}],"predecessor-version":[{"id":99,"href":"https:\/\/blog.profdelevante.net\/index.php?rest_route=\/wp\/v2\/posts\/84\/revisions\/99"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.profdelevante.net\/index.php?rest_route=\/wp\/v2\/media\/97"}],"wp:attachment":[{"href":"https:\/\/blog.profdelevante.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=84"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.profdelevante.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=84"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.profdelevante.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=84"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}