├── .github └── workflows │ └── main.yml ├── .gitignore ├── .vscode └── settings.json ├── LICENSE.md ├── README.md ├── api ├── Make.hx ├── dox │ ├── .haxerc │ ├── .vscode │ │ ├── settings.json │ │ └── tasks.json │ ├── Macro.hx │ ├── Main.hx │ ├── dox.hxml │ ├── haxe_libraries │ │ ├── dox.hxml │ │ ├── hxargs.hxml │ │ ├── hxcpp.hxml │ │ ├── hxcs.hxml │ │ ├── hxjava.hxml │ │ ├── hxnodejs.hxml │ │ ├── hxparse.hxml │ │ ├── hxtemplo.hxml │ │ └── markdown.hxml │ ├── package-lock.json │ ├── package.json │ └── theme │ │ ├── config.json │ │ ├── resources │ │ ├── extra-styles.css │ │ ├── favicon.ico │ │ └── haxe-nav.css │ │ └── templates │ │ ├── footer.mtt │ │ └── topbar.mtt └── xml │ ├── Macro.hx │ ├── Main.hx │ ├── project.xml │ └── xml.hxml └── documentation ├── 00_getting_started ├── 00-getting-started.md ├── 01-install-haxeflixel.md ├── 02-hello-world.md ├── 03-visual-studio-code.md └── 04-where-to-now.md ├── 01_tutorial ├── 00-tutorial.html.md ├── 01-the-power-of-haxeflixel.html.md ├── 02-1-setup.html.md ├── 03-2-creating-a-new-project.html.md ├── 04-3-groundwork.html.md ├── 05-4-sprites-and-animation.html.md ├── 06-5-creating-a-tilemap.html.md ├── 07-6-loading-the-tilemap.html.md ├── 08-7-zoom-and-cameras.html.md ├── 09-8-pickups.html.md ├── 10-9-enemies-and-basic-ai.html.md ├── 11-10-ui-and-combat.html.md ├── 12-11-game-over-menu.html.md ├── 13-12-sound-and-music.html.md ├── 14-13-multiple-platforms.html.md ├── 15-14-polish.html.md └── 16-conclusion.html.md ├── 02_handbook ├── 00-haxeflixel-handbook.html.md ├── 01-flixel-display-list.html.md ├── 02-flxgroup.html.md ├── 03-flxsprite.html.md ├── 04-flxstate.html.md ├── 05-flxsave.html.md ├── 06-flxtween.html.md ├── 07-haxeflixel-conditionals.html.md ├── 08-haxeflixel-targets.html.md ├── 09-desktop-targets.html.md ├── 10-mobile-targets.html.md ├── 11-android.html.md ├── 12-ios.html.md ├── 13-neko.html.md ├── 14-keyboard.html.md ├── 15-mouse.html.md ├── 16-gamepads.html.md ├── 17-actions.html.md ├── 18-troubleshooting.html.md ├── 19-debugger.html.md └── 20-debugger-interaction.html.md ├── 03_resources ├── 00-resources.html.md ├── 01-cheat-sheet.html.md ├── 02-openfl-project-xml-format.html.md ├── 03-game-development-tools.html.md ├── 04-compiler-conditionals.html.md ├── 05-using-haxelib.html.md ├── 06-faq.html.md └── 07-community-tutorials.html.md ├── 04_community ├── 00-community.html.md ├── 01-about.html.md ├── 02-why-haxe.html.md ├── 03-introduction-to-haxe.html.md ├── 04-introduction-to-openfl.html.md ├── 05-contributing.html.md ├── 06-code-contributions.html.md ├── 07-code-style.html.md ├── 08-website-docs.html.md ├── 09-upgrade-guide-3-x.html.md ├── 10-flixel-addons.html.md ├── 11-upgrade-guide-4-0-0.html.md ├── 12-flixel-tools.html.md └── 13-install-development-flixel.html.md └── images ├── 00_getting_started ├── fd-appman-flixel.jpg ├── fd-flixel-screenshots.psd ├── fd-flixel-template.jpg ├── hello-world.png └── vscode │ ├── change-config.gif │ ├── completion.png │ ├── flash-debugging.png │ ├── launch-configs.png │ ├── lime-dropdowns.png │ ├── lime-installation.png │ ├── problems.png │ ├── run-build-task.png │ ├── tasks.png │ ├── terminal.png │ └── vscode-plus-extensions.png ├── 01_tutorial ├── browser_animated_player.gif ├── browser_blue_dot.png ├── browser_blue_square.png ├── browser_coins.png ├── browser_combat_hud.png ├── browser_enemy_brain.png ├── browser_hello_world.png ├── browser_hud.png ├── browser_map_debugger.png ├── browser_options.png ├── browser_zoomed.png ├── ogmo_editor_blank.png ├── ogmo_editor_entities.png ├── ogmo_editor_entities_coins.png ├── ogmo_editor_entities_enemies.png ├── ogmo_editor_tiles.png ├── ogmo_project_entities.png ├── ogmo_project_entities_coin.png ├── ogmo_project_entities_enemies.png ├── ogmo_project_general.png ├── ogmo_project_layers.png ├── ogmo_project_tilesets.png ├── vscode_files.png ├── vscode_flxtext_completion.png ├── vscode_override_completion.png ├── vscode_run_build_task.png └── vscode_target_selection.png ├── 02_handbook ├── debugger │ ├── console-completion.png │ ├── debugger-overlay.png │ ├── draw-debug.png │ ├── icons │ │ ├── arrowRight.png │ │ ├── cursorCross.png │ │ ├── interactive.png │ │ ├── mover.png │ │ ├── pause.png │ │ └── transform.png │ ├── interaction-mover-shortcut.gif │ ├── interaction-mover.gif │ ├── interaction-pointer-fine-picking.gif │ ├── interaction-pointer-simple-select.gif │ ├── interaction-transform.gif │ ├── layout-right.png │ ├── nape-button.png │ ├── stats-window.png │ ├── track-player-custom.png │ ├── track-player.png │ ├── vcr-disabled.png │ ├── vcr-enabled.png │ ├── view-cache.png │ └── watch-window.png ├── flixel-display-list.png ├── flixel-state-0.png ├── flixel-state-1.png ├── nekovm-logo.png └── sprite-animation-example.png └── 04_community ├── about-haxeflixel.png ├── developers ├── Beeblerox.jpeg ├── Gama11.png ├── ProG4mr.jpeg ├── crazysam.png ├── impaler.jpeg ├── larsiusprime.jpeg └── sergey-miryanov.jpeg ├── haxe-logo.png └── upgrade-guide ├── openfl3-shaders.png └── openfl8-shaders.png /.github/workflows/main.yml: -------------------------------------------------------------------------------- 1 | name: CI 2 | 3 | on: 4 | push: 5 | branches: [master] 6 | workflow_dispatch: 7 | repository_dispatch: 8 | 9 | jobs: 10 | build: 11 | runs-on: ubuntu-latest 12 | steps: 13 | - run: sudo apt-get update 14 | - uses: actions/checkout@v3 15 | - uses: krdlab/setup-haxe@v1 16 | with: 17 | haxe-version: "4.3.3" 18 | - uses: HaxeFlixel/setup-flixel@v1 19 | with: 20 | haxe-version: current 21 | flixel-versions: release 22 | target: flash 23 | - run: npm install 24 | working-directory: api/dox 25 | - run: haxe --cwd api --run Make xml pages 26 | - name: Deploy 27 | uses: peaceiris/actions-gh-pages@v3 28 | with: 29 | github_token: ${{secrets.GITHUB_TOKEN}} 30 | publish_dir: ./api/dox/out 31 | cname: api.haxeflixel.com 32 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | api/xml/bin 2 | api/dox/bin 3 | api/dox/out 4 | node_modules -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "files.associations": { 3 | "*.mtt": "xml" 4 | } 5 | } -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2013 HaxeFlixel 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of 6 | this software and associated documentation files (the "Software"), to deal in 7 | the Software without restriction, including without limitation the rights to 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 9 | the Software, and to permit persons to whom the Software is furnished to do so, 10 | subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS 17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 21 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![](https://github.com/HaxeFlixel/haxeflixel.com/blob/dev/content/_static/images/flixel-logos/flixel-docs.png?raw=true) 2 | 3 | [flixel](https://github.com/HaxeFlixel/flixel) | [addons](https://github.com/HaxeFlixel/flixel-addons) | [ui](https://github.com/HaxeFlixel/flixel-ui) | [demos](https://github.com/HaxeFlixel/flixel-demos) | [tools](https://github.com/HaxeFlixel/flixel-tools) | [templates](https://github.com/HaxeFlixel/flixel-templates) | [docs](https://github.com/HaxeFlixel/flixel-docs) | [haxeflixel.com](https://github.com/HaxeFlixel/haxeflixel.com) 4 | 5 | [![CI](https://img.shields.io/github/actions/workflow/status/HaxeFlixel/flixel-docs/main.yml?branch=master&logo=github)](https://github.com/HaxeFlixel/flixel-docs/actions?query=workflow%3ACI) 6 | 7 | ## About 8 | 9 | This is the main location for HaxeFlixel documentation. Pull requests from this location will be pushed to the live website periodically, so please help us improve the HaxeFlixel docs. 10 | 11 | ## Contents 12 | 13 | * The "main" documentation available on [haxeflixel.com/documentation](https://haxeflixel.com/documentation). 14 | * The API documentation. 15 | 16 | ### Main documentation 17 | 18 | The main documentation is made up of `*.html.md` files in the `./documentation` folder. Each file and folder starts with a numerical prefix specifying the order listed on the [docpad website](https://github.com/HaxeFlixel/haxeflixel.com). 19 | 20 | Additional pages can be added using the same extension and using a header specifying the title as seen in the other pages. Eg: 21 | ``` 22 | --- 23 | title: "Documentation Page" 24 | --- 25 | ``` 26 | Use Regular GitHub flavoured markdown for the page. 27 | Note `title:` above is case sensitive. 28 | 29 | The markdown syntax used in the docs is the [GitHub-Flavored-Markdown](https://help.github.com/articles/github-flavored-markdown), thus it's very convenient to directly edit the files via GitHub's web editor. 30 | 31 | ### API documentation 32 | 33 | API documentation is provided in the `./api` folder, they are currently generated with [dox](https://github.com/HaxeFoundation/dox). You can view the API docs offline by cloning this directory, checking out the `gh-pages` branch, running `nekotools server` in `./api` and navigating to [localhost:2000](http://localhost:2000/). 34 | 35 | To generate the API docs yourself, you need to first run `npm install` in `api/dox`. Then run the following from the root directory: 36 | 37 | ``` 38 | haxe --cwd api --run Make xml pages server 39 | ``` 40 | 41 | The docs will now be generated in the `api/dox/out` folder and a local webserver started at `localhost:2000`. 42 | 43 | Note this will use your locally enabled haxelib flixel versions, e.g. if you have `haxelib git flixel` set to `dev` etc. 44 | -------------------------------------------------------------------------------- /api/Make.hx: -------------------------------------------------------------------------------- 1 | class Make { 2 | static function main() { 3 | var args = Sys.args(); 4 | if (args.length == 0) { 5 | args = ["dox", "xml", "pages", "server"]; 6 | } 7 | for (arg in args) { 8 | switch arg { 9 | case "xml": 10 | trace("haxe --cwd xml xml.hxml"); 11 | command("haxe --cwd xml xml.hxml"); 12 | 13 | case "pages": 14 | Sys.setCwd("dox"); 15 | trace("npx haxe dox.hxml"); 16 | command("npx haxe dox.hxml"); 17 | Sys.setCwd(".."); 18 | 19 | case "server": 20 | Sys.setCwd("dox/out"); 21 | command("nekotools server"); 22 | } 23 | } 24 | } 25 | 26 | static function command(cmd:String) { 27 | var exitCode = Sys.command(cmd); 28 | if (exitCode != 0) { 29 | Sys.exit(exitCode); 30 | } 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /api/dox/.haxerc: -------------------------------------------------------------------------------- 1 | { 2 | "version": "4.2.1", 3 | "resolveLibs": "scoped" 4 | } -------------------------------------------------------------------------------- /api/dox/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "[haxe]": { 3 | "editor.formatOnSave": true, 4 | "editor.formatOnPaste": true, 5 | "editor.codeActionsOnSave": { 6 | "source.organizeImports": true 7 | } 8 | } 9 | } -------------------------------------------------------------------------------- /api/dox/.vscode/tasks.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "2.0.0", 3 | "tasks": [ 4 | { 5 | "type": "hxml", 6 | "file": "dox.hxml", 7 | "group": { 8 | "kind": "build", 9 | "isDefault": true 10 | } 11 | } 12 | ] 13 | } -------------------------------------------------------------------------------- /api/dox/Macro.hx: -------------------------------------------------------------------------------- 1 | import haxe.io.Path; 2 | import haxe.macro.Expr; 3 | import sys.FileSystem; 4 | import sys.io.Process; 5 | 6 | using StringTools; 7 | 8 | class Macro { 9 | // meh... 10 | public macro static function getDoxPath():Expr { 11 | var output = getProcessOutput('npx haxelib path dox'); 12 | for (line in output.split("\n")) { 13 | if (FileSystem.exists(line)) { 14 | var path = Path.directory(Path.removeTrailingSlashes(line.trim())); 15 | return macro $v{path}; 16 | } 17 | } 18 | throw "dox path not found"; 19 | } 20 | 21 | static function getProcessOutput(cmd:String, ?args:Array):String { 22 | try { 23 | var process = new Process(cmd, args); 24 | var output = ""; 25 | 26 | try { 27 | output = process.stdout.readAll().toString(); 28 | } catch (_:Dynamic) {} 29 | 30 | process.close(); 31 | return output; 32 | } catch (_:Dynamic) { 33 | return ""; 34 | } 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /api/dox/Main.hx: -------------------------------------------------------------------------------- 1 | package; 2 | 3 | import dox.Api; 4 | import dox.Config; 5 | import dox.Dox; 6 | import haxe.rtti.CType.TypeInfos; 7 | import sys.io.File; 8 | 9 | using StringTools; 10 | 11 | class Main { 12 | public static var defines:Map; 13 | 14 | static function main() { 15 | defines = [ 16 | for (line in File.getContent("../xml/bin/defines.txt").split("\n")) { 17 | var parts = ~/ /.split(line); 18 | parts[0] => parts[1]; 19 | } 20 | ]; 21 | 22 | var config = new Config(Macro.getDoxPath()); 23 | config.inputPath = "../xml/bin/flash/types.xml"; 24 | config.outputPath = "out"; 25 | config.loadTheme("./theme"); 26 | config.pageTitle = "HaxeFlixel API"; 27 | config.defines = [Version => defines["flixel"]]; 28 | config.addFilter("(__ASSET__|ApplicationMain|DocumentClass|DefaultAssetLibrary|Main|NMEPreloader|zpp_nape)", false); 29 | 30 | Dox.run(config, FlixelApi.new); 31 | } 32 | } 33 | 34 | class FlixelApi extends Api { 35 | override function getSourceLink(type:TypeInfos):Null { 36 | var module = type.module != null ? type.module : type.path; 37 | var ending = ".hx"; 38 | var url = "https://github.com/" + if (module.startsWith("flixel.addons.ui") 39 | && !isOneOf(module, ["FlxButtonPlus", "FlxClickArea", "FlxSlider"])) { 40 | "HaxeFlixel/flixel-ui/tree/master"; 41 | } else if (module.startsWith("flixel.addons")) { 42 | "HaxeFlixel/flixel-addons/tree/master"; 43 | } else if (module.startsWith("flixel")) { 44 | "HaxeFlixel/flixel/tree/master"; 45 | } else if (module.startsWith("nape") || module.startsWith("zpp_nape")) { 46 | ending = ".cx"; 47 | "deltaluca/nape/tree/master/cx-src"; 48 | } else if (module.startsWith("spinehaxe")) { 49 | "bendmorris/spinehaxe/tree/master"; 50 | } else if (module.startsWith("openfl")) { 51 | module = module.substr(module.indexOf(".")); 52 | "openfl/openfl/tree/develop/src/openfl"; 53 | } else if (module.startsWith("lime")) { 54 | "openfl/lime/tree/develop/src"; 55 | } else if (module.startsWith("hscript")) { 56 | "HaxeFoundation/hscript/tree/master"; 57 | } else { 58 | 'HaxeFoundation/haxe/blob/${Main.defines["haxe"]}/std'; // default 59 | } 60 | 61 | return haxe.io.Path.join([url, module.replace(".", "/") + ending]); 62 | } 63 | 64 | function isOneOf(module:String, classes:Array):Bool { 65 | for (cl in classes) { 66 | if (module.indexOf(cl) >= 0) 67 | return true; 68 | } 69 | return false; 70 | } 71 | 72 | override function hasSourceLink(type:TypeInfos):Bool { 73 | return type.file != null && type.file.endsWith(".hx"); 74 | } 75 | } 76 | -------------------------------------------------------------------------------- /api/dox/dox.hxml: -------------------------------------------------------------------------------- 1 | -lib dox 2 | -dce no 3 | 4 | -lib hxtemplo 5 | -lib hxparse 6 | -lib hxargs 7 | -lib markdown 8 | 9 | -main Main 10 | 11 | -js bin/main.js 12 | -lib hxnodejs 13 | -cmd node bin/main.js 14 | -------------------------------------------------------------------------------- /api/dox/haxe_libraries/dox.hxml: -------------------------------------------------------------------------------- 1 | # @install: lix --silent download "haxelib:/dox#1.6.0" into dox/1.6.0/haxelib 2 | # @run: haxelib run-dir dox ${HAXE_LIBCACHE}/dox/1.6.0/haxelib 3 | -cp ${HAXE_LIBCACHE}/dox/1.6.0/haxelib/src 4 | -D dox=1.6.0 5 | -------------------------------------------------------------------------------- /api/dox/haxe_libraries/hxargs.hxml: -------------------------------------------------------------------------------- 1 | # @install: lix --silent download "gh://github.com/simn/hxargs#27eb1114ebcc82fe02abf2cfa3738ae6f43b0e24" into hxargs/3.0.2/github/27eb1114ebcc82fe02abf2cfa3738ae6f43b0e24 2 | -cp ${HAXE_LIBCACHE}/hxargs/3.0.2/github/27eb1114ebcc82fe02abf2cfa3738ae6f43b0e24/ 3 | -D hxargs=3.0.2 4 | -------------------------------------------------------------------------------- /api/dox/haxe_libraries/hxcpp.hxml: -------------------------------------------------------------------------------- 1 | # @install: lix --silent download "haxelib:/hxcpp#4.0.64" into hxcpp/4.0.64/haxelib 2 | # @run: haxelib run-dir hxcpp ${HAXE_LIBCACHE}/hxcpp/4.0.64/haxelib 3 | -cp ${HAXE_LIBCACHE}/hxcpp/4.0.64/haxelib/ 4 | -D hxcpp=4.0.64 5 | -------------------------------------------------------------------------------- /api/dox/haxe_libraries/hxcs.hxml: -------------------------------------------------------------------------------- 1 | # @install: lix --silent download "haxelib:/hxcs#4.0.0-alpha" into hxcs/4.0.0-alpha/haxelib 2 | # @run: haxelib run-dir hxcs ${HAXE_LIBCACHE}/hxcs/4.0.0-alpha/haxelib 3 | -cp ${HAXE_LIBCACHE}/hxcs/4.0.0-alpha/haxelib/ 4 | -D hxcs=4.0.0-alpha 5 | -------------------------------------------------------------------------------- /api/dox/haxe_libraries/hxjava.hxml: -------------------------------------------------------------------------------- 1 | # @install: lix --silent download "haxelib:/hxjava#4.0.0-alpha" into hxjava/4.0.0-alpha/haxelib 2 | # @run: haxelib run-dir hxjava ${HAXE_LIBCACHE}/hxjava/4.0.0-alpha/haxelib 3 | -cp ${HAXE_LIBCACHE}/hxjava/4.0.0-alpha/haxelib/ 4 | -D hxjava=4.0.0-alpha 5 | -java-lib lib/hxjava-std.jar 6 | -------------------------------------------------------------------------------- /api/dox/haxe_libraries/hxnodejs.hxml: -------------------------------------------------------------------------------- 1 | # @install: lix --silent download "haxelib:/hxnodejs#12.1.0" into hxnodejs/12.1.0/haxelib 2 | -cp ${HAXE_LIBCACHE}/hxnodejs/12.1.0/haxelib/src 3 | -D hxnodejs=12.1.0 4 | --macro allowPackage('sys') 5 | # should behave like other target defines and not be defined in macro context 6 | --macro define('nodejs') 7 | --macro _internal.SuppressDeprecated.run() 8 | -------------------------------------------------------------------------------- /api/dox/haxe_libraries/hxparse.hxml: -------------------------------------------------------------------------------- 1 | # @install: lix --silent download "haxelib:/hxparse#4.0.1" into hxparse/4.0.1/haxelib 2 | -cp ${HAXE_LIBCACHE}/hxparse/4.0.1/haxelib/src 3 | -D hxparse=4.0.1 4 | -------------------------------------------------------------------------------- /api/dox/haxe_libraries/hxtemplo.hxml: -------------------------------------------------------------------------------- 1 | # @install: lix --silent download "gh://github.com/simn/hxtemplo#4b9ec0c07e9ec619c7c414c3a72af4be63d820cc" into hxtemplo/3.0.0/github/4b9ec0c07e9ec619c7c414c3a72af4be63d820cc 2 | -lib hxparse 3 | -cp ${HAXE_LIBCACHE}/hxtemplo/3.0.0/github/4b9ec0c07e9ec619c7c414c3a72af4be63d820cc/src 4 | -D hxtemplo=3.0.0 5 | -------------------------------------------------------------------------------- /api/dox/haxe_libraries/markdown.hxml: -------------------------------------------------------------------------------- 1 | # @install: lix --silent download "gh://github.com/HaxeFoundation/haxe-markdown#7325695985ea83cd942497a48dcc20af8b383f33" into markdown/1.0.0/github/7325695985ea83cd942497a48dcc20af8b383f33 2 | # @run: haxelib run-dir markdown ${HAXE_LIBCACHE}/markdown/1.0.0/github/7325695985ea83cd942497a48dcc20af8b383f33 3 | -cp ${HAXE_LIBCACHE}/markdown/1.0.0/github/7325695985ea83cd942497a48dcc20af8b383f33/src 4 | -D markdown=1.0.0 5 | -------------------------------------------------------------------------------- /api/dox/package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "requires": true, 3 | "lockfileVersion": 1, 4 | "dependencies": { 5 | "lix": { 6 | "version": "15.8.9", 7 | "resolved": "https://registry.npmjs.org/lix/-/lix-15.8.9.tgz", 8 | "integrity": "sha512-PeyaVHuq6I5q7Gf6YL74zhK9ASPGncF+L405my+waKcFFhtIF8LzrcNWGhcVuJwOHW1VD32+UiTRKoWbHwvvjg==", 9 | "dev": true 10 | } 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /api/dox/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "devDependencies": { 3 | "lix": "^15.8.9" 4 | }, 5 | "scripts": { 6 | "postinstall": "lix download" 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /api/dox/theme/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "HaxeFlixel Theme", 3 | "author": "HaxeFlixel", 4 | "parentTheme": "default" 5 | } 6 | -------------------------------------------------------------------------------- /api/dox/theme/resources/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HaxeFlixel/flixel-docs/d368416733fb317a52f0aea4d2cc62967b72c7a8/api/dox/theme/resources/favicon.ico -------------------------------------------------------------------------------- /api/dox/theme/resources/haxe-nav.css: -------------------------------------------------------------------------------- 1 | /* empty file to prevent the file from the parent theme being pulled in */ -------------------------------------------------------------------------------- /api/dox/theme/templates/footer.mtt: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | 5 |
6 | 7 | 10 | 11 | 13 | 14 | 25 | 26 |
27 | 28 |
29 |

HaxeFlixel is powered by

30 | Haxe 31 | + 32 | 33 | + 34 | 35 |
36 | 37 |
38 |
39 |
-------------------------------------------------------------------------------- /api/dox/theme/templates/topbar.mtt: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /api/xml/Macro.hx: -------------------------------------------------------------------------------- 1 | package; 2 | 3 | #if macro 4 | import haxe.macro.Context; 5 | import sys.FileSystem; 6 | import sys.io.File; 7 | 8 | class Macro { 9 | static function run() { 10 | FileSystem.createDirectory("bin"); 11 | File.saveContent("bin/defines.txt", [for (key => value in Context.getDefines()) '$key $value'].join("\n")); 12 | } 13 | } 14 | #end 15 | -------------------------------------------------------------------------------- /api/xml/Main.hx: -------------------------------------------------------------------------------- 1 | class Main 2 | { 3 | static function main() {} 4 | } -------------------------------------------------------------------------------- /api/xml/project.xml: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /api/xml/xml.hxml: -------------------------------------------------------------------------------- 1 | -cmd haxelib run lime build flash -xml 2 | -------------------------------------------------------------------------------- /documentation/00_getting_started/00-getting-started.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Getting Started" 3 | rootDoc: true 4 | --- 5 | 6 | Welcome to HaxeFlixel! To setup your Windows, Linux or Mac system to start making games, there are three steps: 7 | 8 | 1. [Install Haxe](https://haxe.org/download) 9 | 2. [Install HaxeFlixel](/documentation/install-haxeflixel) 10 | 3. [Run Hello World](/documentation/hello-world) 11 | 12 | After that, you have to choose an editor / IDE to work in. The most popular option is Visual Studio Code (VS Code) which has it's own pages here: 13 | 14 | - [Visual Studio Code](/documentation/visual-studio-code) 15 | 16 | A more comprehensive list of options can be found on [haxe.org](https://haxe.org/documentation/introduction/editors-and-ides.html). 17 | 18 | ---- 19 | 20 | Time to complete this installation is close to 20 minutes (depending on the speed of your Internet connection for downloading the components). 21 | 22 | If you need more help, reach out via any of the [communication channels](/documentation/community). 23 | 24 | ---- 25 | 26 | Note: this guide is a community effort. If you think you can help us improve it, please submit a pull request on 27 | [GitHub](https://github.com/HaxeFlixel/flixel-docs) - each page has an "Edit" button in the upper right corner for this. 28 | -------------------------------------------------------------------------------- /documentation/00_getting_started/01-install-haxeflixel.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Install HaxeFlixel" 3 | --- 4 | 5 | To install the latest stable version of HaxeFlixel, open a command prompt and run the following [Haxelib](http://lib.haxe.org/) commands. This will also install dependencies Lime and OpenFL: 6 | 7 | ``` bash 8 | haxelib install flixel 9 | ``` 10 | 11 | However, if you are using HaxeFlixel from 5.9.0 and below, you will have install Lime and OpenFL explicitly: 12 | 13 | ```bash 14 | haxelib install openfl 15 | haxelib install lime 16 | ``` 17 | 18 | After the installation is complete, you can compile games to HTML5, Flash and Neko out of the box. 19 | 20 | To easily install additional libraries (addons, ui, demos, tools, templates...) in a single step, just run: 21 | 22 | ``` bash 23 | haxelib run lime setup flixel 24 | ``` 25 | 26 | ### Install the `lime` command 27 | 28 | ``` bash 29 | haxelib run lime setup 30 | ``` 31 | 32 | This makes `lime` available as a command (alias for `haxelib run lime`). 33 | 34 | To compile to desktop and mobile targets, you have to make sure you have run the respective `lime setup` 35 | commands. Each are specified in the 36 | [Lime "Advanced Setup" docs](https://lime.openfl.org/docs/advanced-setup/windows/). 37 | 38 | ### Install the `flixel` command 39 | 40 | Run the following two commands to install [flixel-tools](http://haxeflixel.com/documentation/flixel-tools/) (needed for project templates among other things): 41 | 42 | ``` bash 43 | haxelib install flixel-tools 44 | haxelib run flixel-tools setup 45 | ``` 46 | 47 | ### Updating HaxeFlixel 48 | 49 | If a new version of Flixel has been released, and you want to update to it, you can use the following command to do so: 50 | 51 | ``` bash 52 | haxelib update flixel 53 | ``` 54 | 55 | If you wanted to update e.g. `flixel-addons` instead, just replace `flixel` with `flixel-addons`. 56 | 57 | To stay informed about new releases, you can follow [@HaxeFlixel](https://twitter.com/HaxeFlixel) on Twitter or check out our [Blog](http://haxeflixel.com/blog/) from time to time. 58 | 59 | ### Development version 60 | 61 | If you are interested in using bleeding edge code from the development branch [on GitHub](https://github.com/HaxeFlixel/flixel), see [instructions here](/documentation/install-development-flixel). 62 | -------------------------------------------------------------------------------- /documentation/00_getting_started/02-hello-world.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Hello World" 3 | --- 4 | 5 | "Hello World" is a [common example](http://en.wikipedia.org/wiki/Hello_world_program) of getting started with programming, here we will show you how to add Hello World with HaxeFlixel's `FlxText`. You can compile this test for any supported target platform. 6 | 7 | Make sure you have installed Flixel, as well as set up the `lime` and `flixel` commands [as explained previously](/documentation/install-haxeflixel/). 8 | 9 | ### Create a new HaxeFlixel Project 10 | 11 | HaxeFlixel requires a basic structure of files for any project that can be created automatically for you. First open a command prompt and switch to the directory where you'd like to have the project using `cd`, for example: 12 | 13 | ``` bash 14 | cd C:\Users\\Projects 15 | ``` 16 | 17 | Then run the `template` command (`tpl` for short): 18 | 19 | ``` bash 20 | flixel tpl -n "HelloWorld" 21 | ``` 22 | 23 | You will now see a new folder named "HelloWorld" with all the files for your project being created automatically. 24 | 25 | ### Add the "Hello World" `FlxText` 26 | 27 | Adding the text is as simple as opening the `PlayState.hx` file in the newly created `source` folder. The file should look like this: 28 | 29 | ``` haxe 30 | package; 31 | 32 | import flixel.FlxState; 33 | 34 | class PlayState extends FlxState 35 | { 36 | override public function create() 37 | { 38 | super.create(); 39 | } 40 | 41 | override public function update(elapsed:Float) 42 | { 43 | super.update(elapsed); 44 | } 45 | } 46 | ``` 47 | 48 | All you need to do is add the following three lines to the `create()` function (and save the file): 49 | 50 | ``` haxe 51 | override public function create() 52 | { 53 | super.create(); 54 | 55 | var text = new flixel.text.FlxText(0, 0, 0, "Hello World", 64); 56 | text.screenCenter(); 57 | add(text); 58 | } 59 | ``` 60 | 61 | This will create a new `FlxText` instance with font size `64`, center it on the screen and `add()` it so it is displayed. 62 | 63 | ### Test the Project 64 | 65 | Return to your command line window - now we can compile the project. First switch to the directory containing the `Project.xml` file: 66 | 67 | ``` bash 68 | cd HelloWorld 69 | ``` 70 | 71 | You can then compile to HTML5, Neko, HashLink and Flash out of the box with these commands: 72 | 73 | ``` bash 74 | lime test html5 75 | lime test hl 76 | lime test neko 77 | lime test flash 78 | ``` 79 | 80 | Other targets require further setup. For more details, check the "Advanced Setup" section of the [Lime documentation](https://lime.openfl.org/docs/home/). 81 | 82 | If you struggled through any part of this tutorial, [get in touch with the community](/documentation/community/) for support. 83 | 84 | ![](../images/00_getting_started/hello-world.png) 85 | -------------------------------------------------------------------------------- /documentation/00_getting_started/03-visual-studio-code.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Visual Studio Code" 3 | --- 4 | 5 | [![](../images/00_getting_started/vscode/vscode-plus-extensions.png)](https://marketplace.visualstudio.com/items?itemName=vshaxe.haxe-extension-pack) 6 | 7 | [Visual Studio Code](https://code.visualstudio.com/) is an open-source, cross-platform, lightweight code editor by Microsoft. The [Haxe extension](https://marketplace.visualstudio.com/items?itemName=nadako.vshaxe) seamlessly integrates with the compiler's [IDE services](https://haxe.org/manual/cr-completion.html) and uses them for: 8 | 9 | - Code Completion 10 | - Go to Definition 11 | - Go to Symbol 12 | - Find Usages 13 | - Finding Unused Imports 14 | - etc... 15 | 16 | You can find detailed documentation for the Haxe extension in the [Wiki](https://github.com/vshaxe/vshaxe/wiki), this page focuses on the Flixel-specific parts. 17 | 18 | ### Installation 19 | 20 | - Download and install the latest version of [Visual Studio Code](https://code.visualstudio.com/). 21 | - Go to the Extensions tab and install the [Lime extension](https://marketplace.visualstudio.com/items?itemName=openfl.lime-vscode-extension). This automatically installs the Haxe extension as well. 22 | 23 | ![](../images/00_getting_started/vscode/lime-installation.png) 24 | 25 | ### Project Configuration 26 | 27 | VSCode stores its project-specific settings in a `.vscode` subfolder - [flixel-tools](http://haxeflixel.com/documentation/flixel-tools/) can create one with sensible defaults for Flixel projects. Just select VSCode as your preferred editor during the `setup` command, or add `-ide vscode` to the command you're running. 28 | 29 | **Note:** make sure you have the latest versions of flixel-tools and flixel-templates: 30 | 31 | ``` 32 | haxelib update flixel-tools 33 | haxelib update flixel-templates 34 | ``` 35 | 36 | You have several options for creating projects with a `.vscode` configuration: 37 | 38 | 1. Create a new, empty project: 39 | 40 | ``` 41 | flixel template -n "VSCodeTest" -ide vscode 42 | ``` 43 | 44 | 2. Create a new project based on one of the [demos](/demos): 45 | 46 | ``` 47 | flixel create -ide vscode 48 | ``` 49 | 50 | 3. Add the `.vscode` folder to a project that already exists, for instance the current working directory: 51 | 52 | ``` 53 | flixel configure . -ide vscode 54 | ``` 55 | 56 | 4. Add VSCode config files to an entire directory of projects, like flixel-demos: 57 | 58 | ``` 59 | flixel configure C:\HaxeToolkit\haxe\lib\flixel-demos\git -ide vscode 60 | ``` 61 | 62 | ### Code Completion 63 | 64 | Once you've installed the Lime extension and have a project with a `.vscode` folder, just open it with `File` -> `Open Folder`. If the workspace was correctly detected as a Lime project (needs a `Project.xml` file), you should notice these dropdown menus appearing in the status bar: 65 | 66 | ![](../images/00_getting_started/vscode/lime-dropdowns.png) 67 | 68 | Code completion features should work out of the box now: 69 | 70 | ![](../images/00_getting_started/vscode/completion.png) 71 | 72 | If you're having trouble, please refer to the Haxe extension's [Troubleshooting guide](https://github.com/vshaxe/vshaxe/wiki/Troubleshooting). 73 | 74 | ### Building 75 | 76 | Building and running your projects in VSCode is done through _tasks_. You can view the list of available tasks via `Tasks` -> `Run Task...`: 77 | 78 | ![](../images/00_getting_started/vscode/tasks.png) 79 | 80 | To build and run your project, select the `lime: test` task. With Flixel's template, this is configured as the default build task, so you can also invoke it directly via `Tasks` -> `Run Build Task...` or by pressing `Ctrl+Shift+B`: 81 | 82 | ![](../images/00_getting_started/vscode/run-build-task.png) 83 | 84 | You may want to assign a shortcut to `Run Task...` or change the shortcut for `Run Build Task...` to something more convenient such as `F5`. You can do so in `File` -> `Preferences` -> `Keyboard Shortcuts`. 85 | 86 | Finally, you can change the current configuration (combination of target and Debug/Release/Final) by using the dropdown menu in the status bar: 87 | 88 | ![](../images/00_getting_started/vscode/change-config.gif) 89 | 90 | 91 | ### Compiler Errors / Problems View 92 | 93 | By default, compiler errors and warnings are shown in the _Terminal_ view at the bottom of the screen. You can navigate to the source of the error via `Ctrl`+`Click` on the file path: 94 | 95 | ![](../images/00_getting_started/vscode/terminal.png) 96 | 97 | Alternatively, you can switch to the _Problems_ tab which has a nicer presentation. It shows errors / warnings from compilation as well as diagnostics that are updated each time you save a file: 98 | 99 | ![](../images/00_getting_started/vscode/problems.png) 100 | 101 | ### Debugging 102 | 103 | The `.vscode` template from flixel-tools already includes the `launch.json` needed for debugging. The Lime "Build + Debug" / "Debug" launch configurations support debugging with the following targets / extensions: 104 | 105 | - Windows/Linux/Mac via [HXCPP Debugger](https://marketplace.visualstudio.com/items?itemName=vshaxe.hxcpp-debugger) 106 | - HTML5 via [Debugger for Chrome](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome) or [Debugger for Firefox](https://marketplace.visualstudio.com/items?itemName=firefox-devtools.vscode-firefox-debug) 107 | - Flash via [Flash Debugger](https://marketplace.visualstudio.com/items?itemName=vshaxe.haxe-debug) 108 | 109 | Simply "Start Debugging" with the "Build + Debug" launch configuration (make sure the "Debug" configuration for the target you want to debug is selected in the status bar). This first builds the project and then starts the debugger. 110 | 111 | ![](../images/00_getting_started/vscode/launch-configs.png) 112 | 113 | Here's what it should look like when you hit a breakpoint: 114 | 115 | 116 | 117 | There is also a Macro launch configuration for debugging [Haxe Macros](https://haxe.org/manual/macro.html). 118 | -------------------------------------------------------------------------------- /documentation/00_getting_started/04-where-to-now.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Where to now?" 3 | --- 4 | 5 | If you have successfully compiled a Hello World sample, there are multiple places to jump to from here: 6 | 7 | - Follow our step-by-step [tutorial](/documentation/tutorial/) to learn how to make a simple turn based RPG. 8 | - Check out our large collection of [demos](/demos/) to learn by example. Try improving a game and pulling one apart to see how it works! 9 | - Read about different aspects of Flixel in our [handbook](/documentation/haxeflixel-handbook/). 10 | - Browse our [API documentation](http://api.haxeflixel.com/). 11 | 12 | Also be sure to [get in touch with the community](/documentation/community/) if you have any questions along the way! 13 | 14 | Furthermore, this documentation and website are open source and we welcome additions from users like you. :) 15 | -------------------------------------------------------------------------------- /documentation/01_tutorial/00-tutorial.html.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Tutorial" 3 | rootDoc: true 4 | --- 5 | 6 | Welcome to HaxeFlixel! In this tutorial, you will learn how to create a complete game in HaxeFlixel from start to finish, and then some. Each step is broken into smaller chunks to help you get through even the most complicated and daunting steps. 7 | 8 | This tutorial is geared towards building for HTML5, Windows, and Android. We will work primarily with HTML5 most of the time. 9 | 10 | We are going to be building a small **dungeon crawler**. You can see the finished product here: 11 | 12 |
13 | 14 |
15 | 16 | If you have any questions or get stuck during this tutorial, you can get help [here](/documentation/community/). Also, the finished game is [part of flixel-demos](https://github.com/HaxeFlixel/flixel-demos/tree/master/Tutorials/TurnBasedRPG), so you can always compare to the source code of the finished game if you're unsure about something. 17 | 18 | So let's go ahead and get started! 19 | -------------------------------------------------------------------------------- /documentation/01_tutorial/01-the-power-of-haxeflixel.html.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "The Power of HaxeFlixel" 3 | --- 4 | 5 | First, let me talk a bit about why you should use HaxeFlixel. 6 | 7 | HaxeFlixel gets its roots from the [AS3 Flixel Framework](http://flixel.org/) created by 8 | [Adam ‘Atomic’ Saltsman](http://www.adamatomic.com/). If you’ve played [Canabalt](http://www.adamatomic.com/canabalt/), 9 | you’ve seen the early version of this framework in action. HaxeFlixel takes the idea and the general structure of 10 | Flixel, separates it from Flash, and combines it with the power and freedom of [Haxe](http://haxe.org/) - which is a 11 | multi-platform language, so that you can write games that can be easily published to all sorts of platforms 12 | (Windows, Linux, Mac, HTML5, iOS, Android, and more). 13 | 14 | HaxeFlixel comes with a ton of built-in features - classes, utilities, and functions - that handle a lot 15 | of common or complex things that you might need to do. And, because it’s open-source, if you find something that it 16 | can’t do, it’s really easy to change the code - and if your changes would benefit others, 17 | [add them](http://haxeflixel.com/documentation/contributing/) to the library. 18 | 19 | It is a library that is easy to use, but offers the freedom and power to do anything you can think of without 20 | limitations caused by a rigid interface. 21 | 22 | You can find out more about HaxeFlixel [here](http://haxeflixel.com/documentation/about/). -------------------------------------------------------------------------------- /documentation/01_tutorial/02-1-setup.html.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "1 - Setup" 3 | --- 4 | 5 | The first things we need to do is install all of the components we need to work with HaxeFlixel. For that, please follow our general [Getting Started](/documentation/getting-started/) guide. This will get you: 6 | 7 | * Haxe 8 | * Lime 9 | * OpenFL 10 | * HaxeFlixel 11 | 12 | In this tutorial we will be using Visual Studio Code (VSCode) as our editor. See [here](/documentation/visual-studio-code/) for setup and general usage instructions. 13 | 14 | Assuming everything went smoothly, you should be all set - now we can actually get to the fun part and start coding! 15 | -------------------------------------------------------------------------------- /documentation/01_tutorial/03-2-creating-a-new-project.html.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "2 - Creating a new project" 3 | --- 4 | 5 | Now we want to make sure that everything is installed properly - and we want to set up the framework for our game. So we're going to make a new project, open it with VSCode and test that it builds and runs. 6 | 7 | 1. In the command prompt, enter: 8 | 9 | ```bash 10 | flixel tpl -n "TurnBasedRPG" -ide vscode 11 | ``` 12 | 13 | This will create a new Flixel project using the blank template in the directory `TurnBasedRPG` (as well as naming the project `TurnBasedRPG`). 14 | 15 | 2. Depending on how you've configured flixel-tools and whether the `code` command is available, `flixel tpl` might already have opened a VSCode window with the right folder automatically. 16 | 17 | If not, simply open the `TurnBasedRPG` folder with `File > Open Folder...`. 18 | 19 | 3. Over on the left side of the screen, you should see your project. This will contain all the files that the template generated for us. 20 | 21 | ![](../images/01_tutorial/vscode_files.png) 22 | 23 | 4. Next, let's make sure that our project builds and runs properly. By default, a fresh, new Flixel template project will launch the game in the `PlayState`. So go ahead and double-click to open that file from the project list. 24 | This file is a very basic (and empty) example of a `FlxState` subclass. You can think of a `FlxState` a little bit like a 'scene'. When your game is running, one - and only one - state will be the active state. Anything 'added' to that state will be visible and accessible by the player, and, for the most part, will be segregated from other states in your game. 25 | 26 | They are great for having different sections of your game that are sort of in a bubble from one another, such as a `MenuState` (which we will add later) and the `PlayState` (where the game is actually played). 27 | 28 | You'll see that, at least for now, the `PlayState` only has two functions in it: `create()` and `update()`. When a state is loaded, its `create()` function is called. This is where you want to initialize all of the things in your state. 29 | 30 | `update()` is where all the real magic happens - it is called every 'frame' in your game (by default 60 times per second). When a `FlxState`'s `update()` is called, it will call `update()` on all of the objects that have been added to it. This is basically how everything in your game actually 'happens'. We will get to play with this more later on. 31 | For now, we JUST want to see that the whole thing works, so, we're going to add a simple `FlxText` object to this state. 32 | 33 | 5. In `create()`, right before the line that says `super.create();`, type out the following two lines: 34 | 35 | ```haxe 36 | var text = new FlxText(10, 10, 100, "Hello, World!"); 37 | add(text); 38 | ``` 39 | 40 | While you're typing, code completion should pop up and suggest `FlxText`. 41 | 42 | ![](../images/01_tutorial/vscode_flxtext_completion.png) 43 | 44 | Here, press `Enter` or simply type a `(` - notice how the following lines has automatically been added to your imports at the top of the file: 45 | 46 | ```haxe 47 | import flixel.text.FlxText; 48 | ``` 49 | 50 | Then save your changes (or simply enable auto-save via `File > Auto Save`). 51 | 52 | 8. The moment of truth! Go down to the status bar in VSCode and verify that the HTML5 target is selected in the lower left: 53 | 54 | ![](../images/01_tutorial/vscode_target_selection.png) 55 | 56 | Then run the "build task" (or press the keyboard shortcut for it)! 57 | 58 | ![](../images/01_tutorial/vscode_run_build_task.png) 59 | 60 | After a short moment, your default browser should pop up with a HaxeFlixel splash screen and then the text we just added: 61 | 62 | ![](../images/01_tutorial/browser_hello_world.png) 63 | 64 | It worked! You've built and ran your first HaxeFlixel project! 65 | 66 | At this point, you could try building it for Neko, Windows and Android to make sure they all work as well. If you run into problems with any of those, double-check your code, check out the OpenFL installation information, and if that doesn't help, [get in touch with the community](/documentation/community/). 67 | 68 | This is only a small step towards bigger and better things! In the next part, we'll actually define the game we're going to be building, and start putting it together! 69 | -------------------------------------------------------------------------------- /documentation/01_tutorial/05-4-sprites-and-animation.html.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "4 - Sprites and Animation" 3 | --- 4 | 5 | So we have a player sprite that moves around the screen. Great! But… we don't want it to just look like a block… so let's add some graphics! 6 | 7 | First, you need to have the sprite's graphic. Using your image editor of choice, you can draw pretty much anything you want, and save it as a transparent `.png`. For our player sprite, we're going to have it be made up of 16x16 pixel frames, with two different frames for each of the 4-possible facing directions (left and right are used by the same 2 frames, since we will be flipping them later). 8 | 9 | You can draw it yourself, if you want, or use this image, created by my friend Vicky Hedgecock for this tutorial: 10 | 11 | ![](https://raw.githubusercontent.com/HaxeFlixel/flixel-demos/master/Tutorials/TurnBasedRPG/assets/images/player.png) 12 | 13 | Save your file in `assets/images`. 14 | 15 | Now we need to actually load the player's graphic into the sprite. So, bring up your `Player` class again. 16 | 17 | 1. Remove the `makeGraphic()` call from your constructor, and replace it with: 18 | 19 | ```haxe 20 | loadGraphic(AssetPaths.player__png, true, 16, 16); 21 | ``` 22 | 23 | This tells your sprite to use the `player.png` graphic, that it's animated, and that each frame is 16x16 pixels. `AssetPaths` is a class generated by a neat [Haxe macro](http://haxe.org/manual/macro.html) which builds its variables from the contents of your `Project.xml`'s assets tag. Macros are a little complicated, but worth taking a look into at some point. In this case, we use `AssetPaths` as an easy way to reference our assets in code. Note that we could also just use a raw string path like `"assets/images/player.png"`. 24 | 25 | 2. Next, we want to allow the sprite to be flipped based on its `facing` value. This makes it so we only need sprites for one direction (left), and not two (left and right). 26 | 27 | Add the following: 28 | 29 | ```haxe 30 | setFacingFlip(LEFT, false, false); 31 | setFacingFlip(RIGHT, true, false); 32 | ``` 33 | 34 | All we're doing here is saying that we don't want to flip anything when facing left (because our sprite already faces left), and to flip horizontally when facing right. We could do the same for up and down if we wanted. 35 | 36 | 3. Then, we want to make the hitbox match the graphics. With this more top down perspective, it's good practice for the hitbox to match the feet, so let's set ours to the bottom middle of the sprite: 37 | 38 | ```haxe 39 | setSize(8, 8); 40 | offset.set(4, 8); 41 | ``` 42 | 43 | 4. Now, we need to define our animations. In our case, we want a unique animation for each direction, except the right-facing one will be a mirrored version of the left-facing animation. We also want a "idle" and "walk" animations, depending on whether the player is moving. So, add: 44 | 45 | ```haxe 46 | animation.add("d_idle", [0]); 47 | animation.add("lr_idle", [3]); 48 | animation.add("u_idle", [6]); 49 | animation.add("d_walk", [0, 1, 0, 2], 6); 50 | animation.add("lr_walk", [3, 4, 3, 5], 6); 51 | animation.add("u_walk", [6, 7, 6, 8], 6); 52 | ``` 53 | 54 | We're finished with the constructor changes, the final step is to change our `updateMovement()` function to tell the player sprite which way to face. So, modify our section which deals with setting the player's `angle` so that it will also set its `facing`, accordingly: 55 | 56 | ```haxe 57 | if (up || down || left || right) 58 | { 59 | var newAngle:Float = 0; 60 | if (up) 61 | { 62 | newAngle = -90; 63 | if (left) 64 | newAngle -= 45; 65 | else if (right) 66 | newAngle += 45; 67 | facing = UP; 68 | } 69 | else if (down) 70 | { 71 | newAngle = 90; 72 | if (left) 73 | newAngle += 45; 74 | else if (right) 75 | newAngle -= 45; 76 | facing = DOWN; 77 | } 78 | else if (left) 79 | { 80 | newAngle = 180; 81 | facing = LEFT; 82 | } 83 | else if (right) 84 | { 85 | newAngle = 0; 86 | facing = RIGHT; 87 | } 88 | 89 | // determine our velocity based on angle and speed 90 | velocity.setPolarDegrees(SPEED, newAngle); 91 | } 92 | ``` 93 | 94 | Now we can use this `facing` value to determine which animation to use, but we also need to know whether the player is currently moving or not. Using these values we will determine with animation to use: 95 | 96 | ```haxe 97 | var action = "idle"; 98 | // check if the player is moving, and not walking into walls 99 | if ((velocity.x != 0 || velocity.y != 0) && touching == NONE) 100 | { 101 | action = "walk"; 102 | } 103 | 104 | switch (facing) 105 | { 106 | case LEFT, RIGHT: 107 | animation.play("lr_" + action); 108 | case UP: 109 | animation.play("u_" + action); 110 | case DOWN: 111 | animation.play("d_" + action); 112 | case _: 113 | } 114 | ``` 115 | 116 | Every time this function gets called, it will check to see which of the directions the player is pressing, and, based on those, which way the sprite should be facing, and which animation should be playing. 117 | 118 | Note: Calling `animation.play` with an animation name matching the current animation will not restart the animation. 119 | 120 | 5. Save your changes and run your project, and you should see your player sprite animate while being moved, and facing the right direction! 121 | 122 | ![](../images/01_tutorial/browser_animated_player.gif) 123 | 124 | Next, we'll talk about maps and collision! 125 | -------------------------------------------------------------------------------- /documentation/01_tutorial/06-5-creating-a-tilemap.html.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "5 - Creating a Tilemap" 3 | --- 4 | 5 | Now it's time to make some maps for the player to move around in! To do this, we're going to use a tool called _Ogmo Editor_. Ogmo is a free tilemap editor that works very nicely with HaxeFlixel. For this part of the tutorial, we're just going to use a simple 2-tile tilesheet with a tile for walls and a tile for floors. 6 | 7 | You can make your own, with 16x16 pixel tiles, or use this one: 8 | 9 | ![](https://raw.githubusercontent.com/HaxeFlixel/flixel-demos/master/Tutorials/TurnBasedRPG/assets/images/tiles.png) 10 | 11 | (Note: the first tile should be empty!) 12 | 13 | 1. Download and install [Ogmo Editor 3](https://ogmo-editor-3.github.io/), then launch it. 14 | 15 | 2. Click on `New Project` and navigate to `assets/data` - save the project as `turnBasedRPG.ogmo`. 16 | 17 | 3. On the `General` tab, you can rename your project, set the default level sizes, and more. Set it up like this: 18 | 19 | 20 | 21 | 4. On the `Layers` tab, make an `Entity Layer` called `entities` and a `Tile Layer` called `walls`: 22 | 23 | 24 | 25 | 5. On the `Entities` tab, make an entity called `player`: 26 | 27 | 28 | 29 | 6. Finally, on the `Tilesets` tab, make a new tileset called `tiles` and load the tiles from earlier: 30 | 31 | 32 | 33 | 7. When you're done, click on `Save` and you'll be brought to this screen: 34 | 35 | 36 | 37 | 8. Make sure you're on the `walls` layer, and using the tools at the top, draw out a simple map. Make sure it's completely encircled by walls (so the player can't wander off the map), and make the insides filled with floor tiles. You should end up with something like this: 38 | 39 | 40 | 41 | 9. Now, switch over to the 'entities' layer, and place your player entity somewhere in one of your rooms: 42 | 43 | 44 | 45 | 10. Hit Ctrl+S (Cmd+S on Mac), and save this level as `room-001.json` in `assets/data`. 46 | 47 | We're done with Ogmo for now, so save all your changes and exit. 48 | 49 | In the next part, we will learn how to load the newly created tilemap into our game. -------------------------------------------------------------------------------- /documentation/01_tutorial/07-6-loading-the-tilemap.html.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "6 - Loading the Tilemap" 3 | --- 4 | 5 | One of the great things about using Ogmo with HaxeFlixel is that there is already a built-in class to load and use the maps. However, it's not in the 'standard' HaxeFlixel library - we have to install the flixel-addons library to get access to it. 6 | 7 | 1. Open up a new command prompt and enter: 8 | 9 | ```bash 10 | haxelib install flixel-addons 11 | ``` 12 | 13 | This should run and install the new library. Close the command prompt window when it's finished. 14 | 15 | 2. Jump back into VSCode and open up your `Project.xml` file. We need to tell our project to include flixel-addons in the libraries. 16 | 17 | 3. Look for a line that says: 18 | 19 | ```xml 20 | 21 | ``` 22 | and change it to: 23 | 24 | ```xml 25 | 26 | ``` 27 | 28 | Save this change - you're now playing with flixel-addons! 29 | 30 | 4. Go back to your `PlayState`, and, underneath where the `player` variable is defined, add: 31 | 32 | ```haxe 33 | var map:FlxOgmo3Loader; 34 | var walls:FlxTilemap; 35 | ``` 36 | 37 | We're basically just creating an object to hold our Ogmo map, and then another one to hold the `FlxTilemap` that we will generate from the Ogmo map. 38 | 39 | 5. In `create()`, before we setup the player object, add: 40 | 41 | ```haxe 42 | map = new FlxOgmo3Loader(AssetPaths.turnBasedRPG__ogmo, AssetPaths.room_001__json); 43 | walls = map.loadTilemap(AssetPaths.tiles__png, "walls"); 44 | walls.follow(); 45 | walls.setTileProperties(1, NONE); 46 | walls.setTileProperties(2, ANY); 47 | add(walls); 48 | ``` 49 | 50 | This just loads our room file into our `FlxOgmo3Loader` object, generates our `FlxTilemap` from the 'walls' layer, and then sets tile 1 (our floor tile) to not collide, and tile 2 (walls) to collide from any direction. Then we add our tilemap to the state. 51 | 52 | 6. Now, we need to make our player object get placed in the right location on the map. So, change where we initialize our player from: 53 | 54 | ```haxe 55 | player = new Player(20, 20); 56 | ``` 57 | 58 | to: 59 | 60 | ```haxe 61 | player = new Player(); 62 | map.loadEntities(placeEntities, "entities"); 63 | ``` 64 | 65 | We're simply telling our `map` object to loop through all of the entities in our 'entities' layer, and call the `placeEntities()` for each one (which we're about to make now). 66 | 67 | 7. Let's make the `placeEntities()` function now. When we call `loadEntities()` on our map, it will pass the data of all of the placed entities to whatever function we want. In our function, we need to take this information and do something with it. It will look like this now: 68 | 69 | ```haxe 70 | function placeEntities(entity:EntityData) 71 | { 72 | if (entity.name == "player") 73 | { 74 | player.setPosition(entity.x, entity.y); 75 | } 76 | } 77 | ``` 78 | 79 | So, if this function gets passed an entity with the name "player", it will set our player object's `x` and `y` values to the entity's `x` and `y` values. 80 | 81 | 8. Now, we want to add collisions to our state, so the player will bump into walls instead of just walking through them. So, in `update()`, after `super.update(elapsed);` add: 82 | 83 | ```haxe 84 | FlxG.collide(player, walls); 85 | ``` 86 | 87 | All this does is check for overlaps between our player and the walls tilemap each `update()` call. If there are any overlaps, the objects are automatically separated from each other. 88 | 89 | 9. Finally, we want to make a small tweak to the player sprite. It's a good idea to make sure that your player has a decent chance of making it through doorways. Since by default, our player sprite is the same size as our tiles (16x16 pixels), it makes it so the player has to thread the needle to make it through 1-tile wide doorways. To remedy this, we're going to change the player sprite's size and offsets. This won't change what is actually displayed for the player's graphic, only its hitbox. 90 | 91 | So, in the `Player` class, in the constructor, under where we set the `drag`, add: 92 | 93 | ```haxe 94 | setSize(8, 8); 95 | offset.set(4, 4); 96 | ``` 97 | 98 | 10. Since we just changed the player's hitbox, we want to visualize it! Switch to `HTML5 / Debug` in the status bar and build the project. You can now press `F2` to bring up [HaxeFlixel's powerful debugging overlay](/documentation/debugger/). 99 | 100 | Press the 3D-ish looking cube button in the upper right corner to render hitboxes: 101 | 102 | ![](../images/01_tutorial/browser_map_debugger.png) 103 | 104 | If you look closely, you can see that the player's is smaller than the tiles now. 105 | 106 | In the next part, we'll talk about some small tweaks to the camera. 107 | -------------------------------------------------------------------------------- /documentation/01_tutorial/08-7-zoom-and-cameras.html.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "7 - Zoom and Cameras" 3 | --- 4 | 5 | When you run your game now, you'll notice that everything is really, really small. We're going to make it more visible by applying some zoom to our game so that we can get a better look at the action. This is a pretty quick change: 6 | 7 | 1. Open the `Main.hx` file. This class initializes your game, and there are a few things here that you could play with, if you want. We just need to change a couple of the arguments. 8 | 9 | 2. Change the width and height arguments of `new FlxGame()` to `320` and `240` (half of their original values). 10 | 11 | 3. If you ran the game right now, everything would be zoomed in, but the player would run off the screen pretty quick - we need to tell the camera to follow the player around. So, open the `PlayState` again. 12 | 13 | 4. In the create function, after you add the player and before `super.create()`, add: 14 | 15 | ```haxe 16 | FlxG.camera.follow(player, TOPDOWN, 1); 17 | ``` 18 | 19 | This simply tells the camera to follow the player using the `TOPDOWN` style, with a `lerp` of 1 (which helps the camera move a little more smoother). 20 | 21 | That's it! Test out the game and see how it looks! 22 | 23 | ![](../images/01_tutorial/browser_zoomed.png) 24 | 25 | Next, let's give the player something to pickup around the map! 26 | -------------------------------------------------------------------------------- /documentation/01_tutorial/09-8-pickups.html.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "8 - Pickups" 3 | --- 4 | 5 | Now that we have our little guy running around our map, lets give him something to pick up. We'll add some simple coins that will add to the player's score when they are picked up. 6 | 7 | 1. Open up your project in Ogmo again, and click `Edit Project`. 8 | 9 | 2. On the `Entities` tab, add a new entity: 10 | 11 | 12 | 13 | 3. Open up the level we used before, and, on the 'entities' layer, scatter a bunch of coins around: 14 | 15 | 16 | 17 | 4. We're going to make our coins be 8x8 pixels. For the coin's graphic, you can use this image ![](https://raw.githubusercontent.com/HaxeFlixel/flixel-demos/master/Tutorials/TurnBasedRPG/assets/images/coin.png), or make your own. Make sure you save this in `assets/images`. 18 | 19 | 5. Get back into VSCode, and make a new `Coin` class: 20 | 21 | ```haxe 22 | package; 23 | 24 | import flixel.FlxSprite; 25 | 26 | class Coin extends FlxSprite 27 | { 28 | public function new(x:Float, y:Float) 29 | { 30 | super(x, y); 31 | loadGraphic(AssetPaths.coin__png, false, 8, 8); 32 | } 33 | } 34 | ``` 35 | 36 | 7. Now, head back to the `PlayState`. We need to change our map logic so that when it's loading the entities and sees a coin in our Ogmo file, it will add a `Coin` object to our state. 37 | 38 | 8. First, let's make a _group_ to hold all the coins in. At the top of our class, where we defined all our variables so far, add: 39 | 40 | ```haxe 41 | var coins:FlxTypedGroup; 42 | ``` 43 | 44 | Groups are like arrays of Flixel objects which can be used in a lot of different ways. In this case, since our group will only be containing coins, we will make it a `FlxTypedGroup`. 45 | 46 | In `create()`, after we add our walls, and before we initialize our player, we need to initialize and add our coin group: 47 | 48 | ```haxe 49 | coins = new FlxTypedGroup(); 50 | add(coins); 51 | ``` 52 | 53 | 9. Next, we just want to change our `placeEntities()` function to put a coin into our group every time it encounters one in our Ogmo file. At the end of our if statement, add: 54 | 55 | ```haxe 56 | else if (entity.name == "coin") 57 | { 58 | coins.add(new Coin(entity.x + 4, entity.y + 4)); 59 | } 60 | ``` 61 | 62 | This will simply create a new coin, tell it to be at the position defined in the Ogmo file (`+4` to `x` and `y` to center it on the tile), and add it to the coin group. 63 | 64 | 10. Now we need to have the player be able to collect the coins. We're going to use an overlap check to do this. In `update()`, after your `FlxG.collide()` call, add: 65 | 66 | ```haxe 67 | FlxG.overlap(player, coins, playerTouchCoin); 68 | ``` 69 | 70 | This just says: every frame, check if there are any overlaps between the player and the coin group, and if there are, call `playerTouchCoin`. 71 | 72 | 11. Let's add the `playerTouchCoin()` callback now: 73 | 74 | ```haxe 75 | function playerTouchCoin(player:Player, coin:Coin) 76 | { 77 | if (player.alive && player.exists && coin.alive && coin.exists) 78 | { 79 | coin.kill(); 80 | } 81 | } 82 | ``` 83 | 84 | This function simply verifies that the player and the coin that overlap each other are both alive and exist. If so, the coin is killed (we'll add the score a little later on). 85 | 86 | If you run the game right now, as you walk around the map, each coin you touch will disappear. Works great, but it's a little boring… Let's add a little style! 87 | 88 | 12. Go back to your `Coin` class, and add these functions: 89 | 90 | ```haxe 91 | override function kill() 92 | { 93 | alive = false; 94 | FlxTween.tween(this, {alpha: 0, y: y - 16}, 0.33, {ease: FlxEase.circOut, onComplete: finishKill}); 95 | } 96 | 97 | function finishKill(_) 98 | { 99 | exists = false; 100 | } 101 | ``` 102 | 103 | First, we `override` the `kill()` function - normally, by calling `.kill()` on an object, it will set both the `alive` and `exists` properties to `false`. In this case, we want to set `alive` to `false`, but we don't want to set `exists` to `false` just yet (objects which `exists == false` don't get drawn or updated). Instead, we initialize a `FlxTween`. 104 | 105 | `FlxTween` is a powerful tool that lets you animate an object's properties. For our coins, we want to make it fade out while also rising up. 106 | 107 | We set the duration to `0.33` seconds, and we are using the `circOut` easing style, to make the tween look a little nicer. Also we want to call `finishKill()` when the tween has completed, which just sets the coin's `exists` property to `false`, effectively removing it from the screen. By default, the tween type is set to `ONESHOT` so it is only executed once (instead of looping). You can change this by specifying a different `type` in the tween options, but in our case the default behavior is just what we need. 108 | 109 | The type of the `FlxTween` complete callback is `FlxTween->Void` (receives a single `FlxTween` argument and returns nothing). In this case, we named it `_` to indicate that we don't care about it, which is a common Haxe idiom (other than that, there's nothing special about it - to the compiler it's just an argument named `_`). 110 | 111 | Try out the game now, and you'll notice the difference when you pick up coins! We'll do some more of this later on when we start adding 'juice' to our game. 112 | 113 | ![](../images/01_tutorial/browser_coins.png) 114 | 115 | In the next part, we'll talk about enemies! 116 | -------------------------------------------------------------------------------- /documentation/01_tutorial/12-11-game-over-menu.html.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "11 - Game Over Menu" 3 | --- 4 | 5 | Our game is really starting to come together! Now we need it to feel more like a 'game' with a win and lose scenario. For our (very simple) game, we'll just make it so that if you ever die in combat, you get a Game Over, and when you beat the boss enemy, you win. Both of these conditions will take you to the same `FlxState` to show you your score and allow you to play again if you want. 6 | 7 | 1. Let's start with `PlayState`. We need to add some flags to see if we're ending the game, and if the player has 'won' or not. So, add: 8 | 9 | ```haxe 10 | var ending:Bool; 11 | var won:Bool; 12 | ``` 13 | 14 | To the top of the class. 15 | 16 | 2. Next, in `update()`, right under `super.update(elapsed)` add: 17 | 18 | ```haxe 19 | if (ending) 20 | { 21 | return; 22 | } 23 | ``` 24 | 25 | We don't want to allow anything else to go on if we're ending the game and getting ready to switch states. 26 | 27 | 3. Next, still in `update()`, we're going to change our logic in `if (inCombat)` to this: 28 | 29 | ```haxe 30 | if (!combatHud.visible) 31 | { 32 | health = combatHud.playerHealth; 33 | hud.updateHUD(health, money); 34 | if (combatHud.outcome == DEFEAT) 35 | { 36 | ending = true; 37 | FlxG.camera.fade(FlxColor.BLACK, 0.33, false, doneFadeOut); 38 | } 39 | else 40 | { 41 | if (combatHud.outcome == VICTORY) 42 | { 43 | combatHud.enemy.kill(); 44 | if (combatHud.enemy.type == BOSS) 45 | { 46 | won = true; 47 | ending = true; 48 | FlxG.camera.fade(FlxColor.BLACK, 0.33, false, doneFadeOut); 49 | } 50 | } 51 | else 52 | { 53 | combatHud.enemy.flicker(); 54 | } 55 | inCombat = false; 56 | player.active = true; 57 | enemies.active = true; 58 | } 59 | } 60 | ``` 61 | 62 | This will now check to see if the outcome was `DEFEAT`, and if it was, it will set our ending flag to true, and then tell the camera to start fading out - calling `doneFadeOut()` when it's done. 63 | 64 | Similarly, if the outcome was `VICTORY`, and the enemy that was just defeated was type 1 (the boss), we set our `won` flag to `true`, and also start fading out. 65 | 66 | 4. When the camera is done fading to black, we call this function, which will switch the state to our `GameOverState` (which you'll make in a second), passing it if the player won or not, and how much money they have. 67 | 68 | ```haxe 69 | function doneFadeOut() 70 | { 71 | FlxG.switchState(new GameOverState(won, money)); 72 | } 73 | ``` 74 | 75 | 5. Finally, we need to add the `GameOverState`. This is going to be a pretty simple `FlxState` where we show a message - either "Game Over" or "You Win!", depending on our won flag, and the final score for this player. We will also use flixel's save/load functionality to compare the previous highscores, and, if the new score is higher, replace the saved highscore, and show the highscore on the screen. 76 | 77 | Finally, we have a button to take the player back to the main menu. 78 | 79 | Here is the code for that State: 80 | 81 | [GameOverState.hx](https://github.com/HaxeFlixel/flixel-demos/blob/master/Tutorials/TurnBasedRPG/source/GameOverState.hx) 82 | 83 | If you test your game, you should be able to trigger the `GameOverState` by either dying in combat or defeating the boss, and then clicking on the button in the `GameOverState` will take you back to our `MenuState` so you can play again. If all of that works, you're on the right track! But… our `MenuState` is looking a little bland, now… let's fix that up! 84 | 85 | [](../images/01_tutorial/0021.png) 86 | 87 | 1. Let's add a title and an options-button to the `MenuState`: 88 | 89 | ```haxe 90 | var titleText:FlxText; 91 | var optionsButton:FlxButton; 92 | ``` 93 | 94 | 2. Then, in `create()`, we'll add them to the state (and move the play-button as well): 95 | 96 | ```haxe 97 | titleText = new FlxText(20, 0, 0, "HaxeFlixel\nTutorial\nGame", 22); 98 | titleText.alignment = CENTER; 99 | titleText.screenCenter(X); 100 | add(titleText); 101 | 102 | playButton = new FlxButton(0, 0, "Play", clickPlay); 103 | playButton.x = (FlxG.width / 2) - playButton.width - 10; 104 | playButton.y = FlxG.height - playButton.height - 10; 105 | add(playButton); 106 | 107 | optionsButton = new FlxButton(0, 0, "Options", clickOptions); 108 | optionsButton.x = (FlxG.width / 2) + 10; 109 | optionsButton.y = FlxG.height - optionsButton.height - 10; 110 | add(optionsButton); 111 | ``` 112 | 113 | 3. Add the function that gets called when the options-button is clicked: 114 | 115 | ```haxe 116 | function clickOptions() 117 | { 118 | FlxG.switchState(new OptionsState()); 119 | } 120 | ``` 121 | 122 | 4. The `OptionsState` that is called from the options button is fairly simple. It will contain a button to allow the user to clear the saved data (highscores, etc), as well as a simple `FlxBar` to show the user the current volume level of the game with buttons to adjust it up or down. It will save the volume values so that each time the game starts, it will 'remember' what volume it was last set to (I know there's no sound…. yet ;)) 123 | 124 | The code for this State looks like this: 125 | 126 | [OptionsState.hx](https://github.com/HaxeFlixel/flixel-demos/blob/master/Tutorials/TurnBasedRPG/source/OptionsState.hx) 127 | 128 | The `OptionsState` class uses a different spritesheet for the volume adjustment buttons (because they should appear smaller than the default buttons). This asset must have 3 frames, one to represent each button state: `NORMAL`, `HIGHLIGHT`, and `PRESSED`. As long as we set up the frames in that order, the `FlxButton` class will handle the rest. 129 | 130 | Once again, you can make your own, or use the image below. Place it in the `assets/images` folder, and you should be all set. 131 | 132 | ![](https://raw.githubusercontent.com/HaxeFlixel/flixel-demos/master/Tutorials/TurnBasedRPG/assets/images/button.png) 133 | 134 | Finally, we want our game to load the stored volume (if there is any) each time the game starts, so, go to `Main.hx`, and add this after the `addChild()` call: 135 | 136 | ```haxe 137 | var save = new FlxSave(); 138 | save.bind("TurnBasedRPG"); 139 | if (save.data.volume != null) 140 | { 141 | FlxG.sound.volume = save.data.volume; 142 | } 143 | save.close(); 144 | ``` 145 | 146 | Pretty simple: it makes a new `FlxSave` object, binds it to our `"TurnBasedRPG"` and then checks if there is a volume value stored in it, and if there is, sets our game's volume to match, and then closes the save. 147 | 148 | Test everything out, make sure it's working, and that if you change your volume under options and then exit the game, it retains the value the next time to get into the options screen. 149 | 150 | ![](../images/01_tutorial/browser_options.png) 151 | 152 | Looking good! Next time we'll give our volume something to do by adding sound and music! 153 | -------------------------------------------------------------------------------- /documentation/01_tutorial/14-13-multiple-platforms.html.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "13 - Multiple Platforms" 3 | --- 4 | 5 | One of the big advantages of using HaxeFlixel is the ability to build your games for multiple platforms. You can build a working HTML5, Windows, Linux, Mac, Android and iOS game - all from the same code! So far, we've been working with HTML5, and, for the most part, you don't have to do too much to get your game working on other platforms - if you test it under Windows right now, it should mostly work just fine (although, without music, which we'll discuss later). However, you might run into some issues if you try to build it for a mobile device - at the very least, you won't be able to play it without a keyboard. We'll focus on Windows and Android in this tutorial and add a few things to make them work better on those platforms. 6 | 7 | HaxeFlixel comes equipped with a powerful feature called _conditionals_. By adding some [conditionals](/documentation/haxeflixel-conditionals) to your code, you can make it so that only certain pieces of code will be compiled depending on the conditionals you use. For example, if you are building for Android, which would probably not have a mouse, you could setup a conditional to skip over all mouse-related code. Alternately, you might also add some code to deal with touches, which would only work on mobile platforms, so you would make sure to wrap that logic in conditionals so that it doesn't try to build on Windows or HTML5. 8 | 9 | It's not all that complicated. We'll start with something simple: adding the ability to toggle fullscreen mode on Windows. 10 | 11 | Let's add a button to the `OptionsState`: 12 | 13 | 1. When we initialize and interact with our button, we only want to do it on `desktop` platforms. So, at the top of the class, add: 14 | 15 | ```haxe 16 | #if desktop 17 | var fullscreenButton:FlxButton; 18 | #end 19 | ``` 20 | 21 | 2. In `create()`, somewhere after we add our `volumeBar` object, add: 22 | 23 | ```haxe 24 | #if desktop 25 | fullscreenButton = new FlxButton(0, volumeBar.y + volumeBar.height + 8, FlxG.fullscreen ? "FULLSCREEN" : "WINDOWED", clickFullscreen); 26 | fullscreenButton.screenCenter(X); 27 | add(fullscreenButton); 28 | #end 29 | ``` 30 | 31 | 3. Then we need to add our callback function for that button: 32 | 33 | ```haxe 34 | #if desktop 35 | function clickFullscreen() 36 | { 37 | FlxG.fullscreen = !FlxG.fullscreen; 38 | fullscreenButton.text = FlxG.fullscreen ? "FULLSCREEN" : "WINDOWED"; 39 | save.data.fullscreen = FlxG.fullscreen; 40 | } 41 | #end 42 | ``` 43 | 44 | Yes, we wrap the entire function in our conditional - if we're not building for `desktop`, this function will not exist. You'll also notice that we are saving the value of `FlxG.fullscreen` - this will be used to 'remember' the game's screen state when they next launch the game. 45 | 46 | 4. Next, let's change around our `Main.hx` so that when the game starts it will launch into whatever state the game was last in - fullscreen or not. We need to move things around a little, since we need to find out if we're going into fullscreen or not BEFORE we call `new FlxGame()`, but we need to set the volume AFTER, so `new()` should look like this: 47 | 48 | ```haxe 49 | var startFullscreen:Bool = false; 50 | var save:FlxSave = new FlxSave(); 51 | save.bind("TurnBasedRPG"); 52 | #if desktop 53 | if (save.data.fullscreen != null) 54 | { 55 | startFullscreen = save.data.fullscreen; 56 | } 57 | #end 58 | 59 | super(); 60 | addChild(new FlxGame(320, 240, MenuState, 1, 60, 60, false, startFullscreen)); 61 | 62 | if (save.data.volume != null) 63 | { 64 | FlxG.sound.volume = save.data.volume; 65 | } 66 | save.close(); 67 | ``` 68 | 69 | 5. Next, we need to give players a way to exit the game if they're in fullscreen mode - since they won't easily have access to the close-button anymore. 70 | We do that by adding a new button to the `MenuState`: 71 | 72 | ```haxe 73 | #if desktop 74 | var exitButton:FlxButton; 75 | #end 76 | ``` 77 | 78 | And in `create()`: 79 | 80 | ```haxe 81 | #if desktop 82 | exitButton = new FlxButton(FlxG.width - 28, 8, "X", clickExit); 83 | exitButton.loadGraphic(AssetPaths.button__png, true, 20, 20); 84 | add(exitButton); 85 | #end 86 | ``` 87 | 88 | Then our callback function just looks like: 89 | 90 | ```haxe 91 | #if desktop 92 | function clickExit() 93 | { 94 | Sys.exit(0); 95 | } 96 | #end 97 | ``` 98 | 99 | There you go! Now try it out on both HTML5 and Windows targets and notice the differences - you can't go fullscreen in HTML5, and you can in Windows. You also get the button to exit the game on the MenuState while on Windows. 100 | 101 | To make our game work with Android, we have to make a few more changes. First, we need to make sure that our `Project.xml` is setup correctly so that our settings are right for Android. 102 | 103 | 1. In your app tag, at the very top of the file, add this attribute: 104 | 105 | ```xml 106 | package="com.haxeflixel.turnBasedRPG" 107 | ``` 108 | 109 | This will give your app a package name to be used on the Android device - it's best to be as unique as possible. 110 | 111 | 2. You might be wondering how we're going to allow the user to move around in our game on a device without the keyboard or mouse. Well, HaxeFlixel comes with a `FlxVirtualPad` class which we can use to accept touch input from the user and translate it into movement. Head over to `PlayState.hx`: 112 | 113 | Define: 114 | 115 | ```haxe 116 | #if mobile 117 | public static var virtualPad:FlxVirtualPad; 118 | #end 119 | ``` 120 | 121 | Create and add (in create): 122 | 123 | ```haxe 124 | #if mobile 125 | virtualPad = new FlxVirtualPad(FULL, NONE); 126 | add(virtualPad); 127 | #end 128 | ``` 129 | 130 | 3. Since the player can't move while they're in combat, we're going to remove the distraction of our virtual pad while combat is happening. In the `startCombat()` function, add: 131 | 132 | ```haxe 133 | #if mobile 134 | virtualPad.visible = false; 135 | #end 136 | ``` 137 | 138 | And, to make it reappear, in `update()`, somewhere around where we set `inCombat` to `false`, add: 139 | 140 | ```haxe 141 | #if mobile 142 | virtualPad.visible = true; 143 | #end 144 | ``` 145 | 146 | 4. The only place where we actually check for button presses is in our `Player` class, in the `updateMovement()` function. We currently have a section of code that is setting different gs to true based on keyboard input - but since the keyboard might be disabled on some platforms, we need to change that to look like this: 147 | 148 | ```haxe 149 | #if FLX_KEYBOARD 150 | up = FlxG.keys.anyPressed([UP, W]); 151 | down = FlxG.keys.anyPressed([DOWN, S]); 152 | left = FlxG.keys.anyPressed([LEFT, A]); 153 | right = FlxG.keys.anyPressed([RIGHT, D]); 154 | #end 155 | ``` 156 | 157 | 5. Right after that logic, we'll add our logic that checks each of the buttons of our virtual pad to see which ones are pressed: 158 | 159 | ```haxe 160 | #if mobile 161 | var virtualPad = PlayState.virtualPad; 162 | up = up || virtualPad.buttonUp.pressed; 163 | down = down || virtualPad.buttonDown.pressed; 164 | left = left || virtualPad.buttonLeft.pressed; 165 | right = right || virtualPad.buttonRight.pressed; 166 | #end 167 | ``` 168 | 169 | Because of the way we've structured our movement logic, we don't need to make any other changes! Getting `up` set to true via keyboard or our virtual pad will do the same thing. 170 | 171 | 6. Things are a little different for our combat screen. We could setup the virtual pad to work with our combat menu, but that would feel a little clunky, given that the user has the power to tap on whatever they want on the screen. Instead, we're going to utilize touches to figure out what the player wants to do. 172 | 173 | This means, in our update function, we need to wrap everything that's currently inside `updateKeyboardInput()` with: 174 | 175 | ```haxe 176 | #if FLX_KEYBOARD 177 | ... 178 | #end 179 | ``` 180 | 181 | 7. Inside of our `if (!wait)` statement, add: 182 | 183 | ```haxe 184 | updateTouchInput(); 185 | ``` 186 | 187 | And 188 | 189 | ```haxe 190 | function updateTouchInput() 191 | { 192 | #if FLX_TOUCH 193 | for (touch in FlxG.touches.justReleased()) 194 | { 195 | for (choice in choices.keys()) 196 | { 197 | var text = choices[choice]; 198 | if (touch.overlaps(text)) 199 | { 200 | selectSound.play(); 201 | selected = choice; 202 | movePointer(); 203 | makeChoice(); 204 | return; 205 | } 206 | } 207 | } 208 | #end 209 | } 210 | ``` 211 | 212 | What this does is gets a list of all the touches that were just released this update and checks them one at a time to see if any were on top of one of our choices texts. If one of them is, we play our select sound, and act on the selection - ignoring any other touches that might have happened this update. 213 | 214 | And that's everything! You should be able to run your game on HTML5, Windows (Neko, too!), and Android and have it work on each with slight variations. And you only have one project and one codebase! 215 | 216 | Next we'll polish up our game and add a little juice to make it POP! 217 | -------------------------------------------------------------------------------- /documentation/01_tutorial/15-14-polish.html.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "14 - Polish" 3 | --- 4 | 5 | In this section, you're going to learn a few simple tricks to add some polish and juice to your game. Some of those have already been added here and there, but we'll go through a few places now to talk about them. 6 | 7 | First up, there's a simple effect we can do with our camera to have it fade in or out. This works nice for transitions between states or screens. 8 | We can add it to each of our states' `create()` function like so (right before `super.create()`): 9 | 10 | ```haxe 11 | FlxG.camera.fade(FlxColor.BLACK, 0.33, true); 12 | ``` 13 | 14 | Then, if you want to fade out (when switching states), you can do something like this: 15 | 16 | ```haxe 17 | FlxG.camera.fade(FlxColor.BLACK, 0.33, false, function() 18 | { 19 | FlxG.switchState(new PlayState()); 20 | }); 21 | ``` 22 | 23 | Try adding this logic to all of your states and then see how much of an improvement it gives the flow of your game. 24 | 25 | Next, let's give the player a little feedback whenever they get hurt in combat. We're going to make the screen shake briefly. So, go into the `enemyAttack()` function in `CombatHUD` and, right after we call `FlxG.camera.flash` (another neat little effect you can use in other projects), add: 26 | 27 | ```haxe 28 | FlxG.camera.shake(0.01, 0.2); 29 | ``` 30 | 31 | So, each time the player gets hurt in combat, the screen will flash white, and will shake a little bit for `0.2` seconds. Try it out! 32 | 33 | I know we've used tweens a few times already, but lets add one to show the enemy getting hurt in combat. We're simply going to make a tween that moves the enemy a few pixels to the right, then triggers a second tween to move the enemy back - each one taking `0.1` seconds to complete. So, in the `makeChoice()` function of `CombatHUD`, right before we play the hurt sound for the enemy, add: 34 | 35 | ```haxe 36 | FlxTween.tween(enemySprite, {x: enemySprite.x + 4}, 0.1, { 37 | onComplete: function(_) 38 | { 39 | FlxTween.tween(enemySprite, {x: enemySprite.x - 4}, 0.1); 40 | } 41 | }); 42 | ``` 43 | 44 | Check out how that looks. Tweens are a very simple and powerful tool to make your game feel more active when used properly. 45 | 46 | Next, let's add a background effect to our `CombatHUD` to help bring our the combat screen out from the map a little bit. We're going to copy what's on the camera's buffer, desaturate it, and then apply a `FlxWaveEffect` to give it a wavy effect. HaxeFlixel has several effects like this that can be used for a number of effects (`FlxGlitchEffect`, `FlxRainbowEffect`...). 47 | 48 | 1. Open up the `CombatHUD` class and add this variable: 49 | 50 | ```haxe 51 | var screen:FlxSprite; 52 | ``` 53 | 54 | 2. In the constructor, we'll initialize these two variables (add this before we create our `background`): 55 | 56 | ```haxe 57 | screen = new FlxSprite().makeGraphic(FlxG.width, FlxG.height, FlxColor.TRANSPARENT); 58 | var waveEffect = new FlxWaveEffect(FlxWaveMode.ALL, 4, -1, 4); 59 | var waveSprite = new FlxEffectSprite(screen, [waveEffect]); 60 | add(waveSprite); 61 | ``` 62 | 63 | First, we make our `screen`, make it the size of the window, and just leave it empty for now. Then we create a `FlxEffectSprite`, tell it to target our `screen`, and set its properties. It only uses a single effect, our `waveEffect` instance (it's possible to chain multiple effects using `FlxEffectSprite`). 64 | 65 | 3. Next, in `initCombat` we want to make our `screen` take a copy of whatever is on the camera's buffer and apply it to itself, and then desaturate the image. Our effect sprite will always copy whatever is on our `screen` every update automatically. 66 | 67 | ```haxe 68 | screen.drawFrame(); 69 | var screenPixels = screen.framePixels; 70 | 71 | if (FlxG.renderBlit) 72 | screenPixels.copyPixels(FlxG.camera.buffer, FlxG.camera.buffer.rect, new Point()); 73 | else 74 | screenPixels.draw(FlxG.camera.canvas, new Matrix(1, 0, 0, 1, 0, 0)); 75 | 76 | var rc:Float = 1 / 3; 77 | var gc:Float = 1 / 2; 78 | var bc:Float = 1 / 6; 79 | screenPixels.applyFilter(screenPixels, screenPixels.rect, new Point(), new ColorMatrixFilter([rc, gc, bc, 0, 0, rc, gc, bc, 0, 0, rc, gc, bc, 0, 0, 0, 0, 0, 1, 0])); 80 | ``` 81 | 82 | That's all there is to it! Our effect sprite will fade in and out with the `CombatHUD` already. Try our the effect to see how it looks! 83 | 84 | ![](../images/01_tutorial/browser_combat_hud.png) 85 | 86 | You might have noticed, while testing the game, that the mouse cursor can get in the way - especially since it's not needed outside of the menu states. We can remedy this pretty easily. 87 | In the `PlayState`'s `create()`, add: 88 | 89 | ```haxe 90 | #if FLX_MOUSE 91 | FlxG.mouse.visible = false; 92 | #end 93 | ``` 94 | 95 | And be sure to do the reverse (`= true`) in `GameOverState`'s `create()` No more pesky mouse cursor when we don't need it! 96 | 97 | There are plenty of other tweaks and tricks you can add to your games. Try playing around with the different addons special effects classes in HaxeFlixel and see what else you can come up with. Take a look at [the demos](/demos/) for more examples. 98 | -------------------------------------------------------------------------------- /documentation/01_tutorial/16-conclusion.html.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Conclusion" 3 | --- 4 | 5 | Now we have a pretty complete, working game! It's not too complex, but it should give you a full, well-rounded idea of how to make your own games in HaxeFlixel. I really hope you've enjoyed this tutorial, and take the time to play around with the code some more to try expanding the game even further. You could add more levels, add stairway objects to move between them, add more enemy types, and collectibles, and upgrades… the list goes on. 6 | 7 | As mentioned previously, you can grab the complete source code for the game [here](https://github.com/HaxeFlixel/flixel-demos/tree/master/Tutorials/TurnBasedRPG). 8 | 9 | The power of HaxeFlixel comes from it's balance of simplicity and versatility. With only a few lines of code you can do almost anything you can think of. 10 | 11 | If you want to learn more about using HaxeFlixel, take a look at the [documentation](http://haxeflixel.com/documentation/), and [API](http://api.haxeflixel.com/) for lots more in-depth information. 12 | 13 | I'd like to thank Jens Fischer, Justo Delgado Baudí, the STL IGDA, and the HaxeFlixel Dev Community for helping me get this tutorial finished - a lot of editing and suggestions for improvement came from these people. 14 | 15 | If you enjoyed this tutorial, if it helped you in some way, or if you have suggestions, I always appreciate feedback. You can let me know at [seifertim@gmail.com](mailto:seifertim@gmail.com) or on twitter: [@seifertim](https://twitter.com/SeiferTim). 16 | 17 | Thanks, and happy coding! 18 | -------------------------------------------------------------------------------- /documentation/02_handbook/00-haxeflixel-handbook.html.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "HaxeFlixel Handbook" 3 | rootDoc: true 4 | --- 5 | 6 | Welcome to the HaxeFlixel handbook. These pages are intended to answer common questions and explain the main ideas and structures behind most HaxeFlixel games. 7 | As the types of games and use cases of HaxeFlixel are vast we appreciate developers making additions and improvements to this documentation through [GitHub](https://github.com/HaxeFlixel/flixel-docs). 8 | 9 | If you are familiar with AS3 and new to Haxe, we encourage you to read the [AS3 and Haxe comparison](http://books.openfl.org/as3-conversion-guide/comparing-haxe-and-actionscript/overview.html). 10 | 11 | HaxeFlixel's API is similar to the AS3 version, so existing documentation and resources for ActionScript 3 are still relevant. 12 | -------------------------------------------------------------------------------- /documentation/02_handbook/01-flixel-display-list.html.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Flixel Display List" 3 | --- 4 | The Flixel Display list is a specially designed structure for your game's sprites to be rendered. 5 | 6 | #### `FlxSprite` != `flash.display.Sprite` 7 | 8 | The Flash API has a [display list](http://help.adobe.com/en_US/as3/dev/WS5b3ccc516d4fbf351e63e3d118a9b90204-7e58.html) that is populated by adding [display objects](http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/display/DisplayObject.html) in a parent child relationship. `Sprite`s are an extended form of display objects that have extended features. They can be added, removed and can have their parent and children's depth changed with an easy to use API. 9 | 10 | It is a common misconception for Flash developers to assume that `FlxSprite`s in Flixel work like the Flash `Sprite`s. `FlxSprite`s also do not share the event system Flash `Sprite`s have, so `addEventListener()` is also not available or necessary in most situations. 11 | 12 | For performance reasons, Flixel has its own independent display list and it renders all of its `FlxSprite`s onto a single Flash `DisplayObject` with each `FlxCamera`. For this reason, you cannot add a `flash.display.sprite` to a `FlxState` and you cannot add a `FlxSprite` to the main Flash stage. 13 | 14 | You can see the display objects used in a typical Flixel game in this diagram. Note you can still place display objects above or below Flixel's camera. It is recommended to use `FlxG.addChildBelowMouse()` and `FlxG.removeChild()` for that. 15 | 16 | 17 | -------------------------------------------------------------------------------- /documentation/02_handbook/02-flxgroup.html.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "FlxGroup" 3 | apiPath: group/FlxTypedGroup.html 4 | --- 5 | 6 | ```haxe 7 | import flixel.group.FlxGroup; 8 | ``` 9 | 10 | FlxGroups are an invaluable method of grouping your game objects in Flixel. In fact, there is no way around them, as `FlxState` itself extends `FlxGroup`. 11 | The use cases for groups are vast: pooling to reuse objects, collision detection and setting up easy ways to access particular collections of objects. A great feature of FlxGroups are their ability to be nested when using collision detection. Doing collisions is also way more efficient than doing it for individual objects. 12 | 13 | The API for FlxGroups is similar to other places in Flixel. Here is a basic example using a group to pool bullet objects, represented by a `Bullet` class, holding a maximum of 100 bullets: 14 | 15 | ``` haxe 16 | var poolSize = 100; 17 | var bullets = new FlxTypedGroup(poolSize); 18 | 19 | for (i in 0...poolSize) 20 | { 21 | var bullet = new Bullet(); 22 | bullet.kill(); 23 | bullets.add(bullet); 24 | } 25 | ``` 26 | Note how we did not use a regular `FlxGroup`, but a `FlxTypedGroup`. This means that this particular group can only store objects that are instances of the `Bullet` class or instances of `Bullet` subclasses. `FlxGroup` itself is nothing but a shortcut for `FlxTypedGroup`. 27 | 28 | Now, say we want to retrieve bullet instance to use in a shoot method: 29 | 30 | ``` haxe 31 | var bullet = bullets.recycle(Bullet); 32 | ``` 33 | 34 | If we had used a regular group here, we would have had to `cast` the return value of `recycle()` to a `Bullet`. By using a `FlxTypedGroup`, we have the benefit of type-safety. 35 | 36 | #### add(Object:T):T; 37 | 38 | You can add any type of Object that extends the base FlxGroup type, if you use `FlxGroup` this is `FlxBasic`. 39 | 40 | #### remove(Object:T):T 41 | 42 | Removes an object from a group, it will return the object you removed. 43 | 44 | #### getFirstAvailable(ObjectClass:Class<T> = null):T 45 | 46 | This will let you get the first FlxBasic object that has exists == false, this is typically used in object pooling when object may have used the kill() method. Note if you destroy() objects they will be made null in the FlxGroup and you wont be able to reuse them. 47 | 48 | #### kill(); 49 | 50 | This will recursively kill() all objects so that they will be ready for use with getFirstAvailable. 51 | 52 | #### sort(Function:Int->T->T->Int, Order:Int = FlxSort.ASCENDING); 53 | 54 | Call this function to sort the group according to a particular value and order. You will need to specify a sorting function to do so. If you want to sort by something other than y, you will have to write a custom sorting function. 55 | 56 | 57 | 58 | Otherwise, you can just use the pre-made `FlxSort.byY()` like so for Zelda-style-sorting: 59 | 60 | ```haxe 61 | group.sort(FlxSort.byY); 62 | ``` 63 | 64 | 65 | -------------------------------------------------------------------------------- /documentation/02_handbook/03-flxsprite.html.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "FlxSprite" 3 | apiPath: FlxSprite.html 4 | --- 5 | 6 | ```haxe 7 | import flixel.FlxSprite; 8 | ``` 9 | 10 | FlxSprites are the core building blocks of all Flixel games. They offer a friendly API to add animation, movement and features for the needs of most games. 11 | 12 | It is pretty common place to extend `FlxSprite` for your own game's needs; for example a `SpaceShip` class may extend `FlxSprite` but could have additional variables for the game like `shieldStrength` or `shieldPower`. When you extend `FlxSprite` it is important to remember to use `super.update()` if you override the `update` method, as you would do for any other `FlxBasic`. 13 | 14 | #### loadGraphic() 15 | 16 | This method is the easiest way to use a single image for your FlxSprite. Using the OpenFL asset system defined in the project xml file you simply have to define a path to your image and the compiler will do the rest. 17 | 18 | ```haxe 19 | var player = new FlxSprite(); 20 | player.loadGraphic("assets/player.png"); 21 | add(player); 22 | ``` 23 | 24 | #### makeGraphic() 25 | 26 | This method is a handy way to make a simple color fill to quickly test a feature or have the basic shape. 27 | 28 | ```haxe 29 | var whiteSquare = new FlxSprite(); 30 | whiteSquare.makeGraphic(200, 200, FlxColor.WHITE); 31 | add(whiteSquare); 32 | ``` 33 | 34 | ### Properties 35 | 36 | #### Position: x, y 37 | ```haxe 38 | whiteSquare.x = 100; 39 | whiteSquare.y = 300; 40 | ``` 41 | 42 | #### Size: width, height 43 | 44 | Automatically set in `loadGraphic()` or `makeGraphic()`, changing this will only affect the hitbox of this sprite, use `scale` to change the graphic's size. 45 | ```haxe 46 | // get 47 | var getWidth = whiteSquare.width; 48 | 49 | // set 50 | whiteSquare.width = 100; 51 | whiteSquare.height = 100; 52 | ``` 53 | 54 | #### Scale 55 | **(FlxPoint)** 56 | Change the size of your sprite's graphic. *NOTE: The hitbox is not automatically adjusted, use `updateHitbox()` for that (or `setGraphicSize()`).* 57 | ```haxe 58 | // twice as big 59 | whiteSquare.scale.set(2, 2); 60 | 61 | // 50% 62 | whiteSquare.scale.set(0.5, 0.5); 63 | ``` 64 | 65 | #### Offset 66 | **(FlxPoint)** 67 | Controls the position of the sprite's hitbox. Likely needs to be adjusted after changing a sprite's width, height or scale. 68 | ```haxe 69 | whiteSquare.offset.set(50, 50); 70 | ``` 71 | 72 | #### Origin 73 | **(FlxPoint)** 74 | Rotation axis. **Default: center.** 75 | 76 | *WARNING: If you change this, the visuals and the collisions will likely be pretty out-of-sync if you do any rotation.* 77 | ```haxe 78 | // rotate from top-left corner instead of center 79 | whiteSquare.origin.set(0, 0); 80 | ``` 81 | 82 | #### ​kill() 83 | 84 | This method is useful for when you want to hide a sprite from the stage but keep it available to reuse later. For example you may want to respawn an enemy the player has killed. 85 | 86 | #### destroy() 87 | 88 | This method is destructive to the sprite and should be used when you want to make sure that the sprite will be cleared from memory. It is commonly used inside a FlxState's overridden destroy method. 89 | 90 | ### Animation 91 | 92 | Flixel supports spritesheet animation. 93 | 94 | ![](../images/02_handbook/sprite-animation-example.png) 95 | 96 | ```haxe 97 | player.loadGraphic("assets/player.png", true, 32, 36); 98 | player.animation.add("walk", [0, 1, 0, 2], 5, true); 99 | player.animation.play("walk"); 100 | ``` 101 | -------------------------------------------------------------------------------- /documentation/02_handbook/04-flxstate.html.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "FlxState" 3 | apiPath: FlxState.html 4 | --- 5 | 6 | This is the basis for your game's levels and menus, each described in a "state" structure. The state is a way of organising your game objects for the state that the game is currently in. For example, when you create level 0 of your game it's much more organized to only have the code for that level, not every level. Also it's good to use switching states to clear your memory, to avoid memory leaks. A typical Flixel game will have a separate `FlxState` class for every level and menu. 7 | 8 | 9 | 10 | In each `FlxState` all the FlxSprites are added to be rendered. 11 | 12 | 13 | 14 | ### Important Methods 15 | 16 | #### create() 17 | 18 | This is where you setup and create all your state's objects; for example your level tilemaps, your player sprites, spawn your initial enemies. Flixel runs this method before it starts to render your state so its the perfect place. 19 | 20 | #### add(object:FlxBasic) 21 | 22 | This is the place where you add your sprites, tilemaps etc to your state to be rendered. It works similar to OpenFL's display list API with `addChild()`. 23 | 24 | #### remove(object:FlxBasic) 25 | 26 | This is the place where you remove sprites etc you have added to your state. Everything you remove still exists so you can add it back later. If you're not going to use the removed object again you might want to consider removing it from memory by setting it as null for example. 27 | 28 | #### update(elapsed:Float) 29 | 30 | This is the place where you can run code on every frame of your game. It's where you setup your input controls, trigger movement and almost all of your gameplay logic. 31 | 32 | ``` haxe 33 | package; 34 | 35 | import flixel.FlxState; 36 | 37 | class FlxExampleState extends FlxState 38 | { 39 | override public function create():Void 40 | { 41 | //create your state objects here 42 | } 43 | 44 | override public function update(elapsed:Float):Void 45 | { 46 | //call super to update the core state class 47 | super.update(elapsed); 48 | } 49 | } 50 | ``` 51 | 52 | Here is an example of a simple game state; 53 | 54 | ``` haxe 55 | package; 56 | 57 | import flixel.tile.FlxTilemap; 58 | import flixel.FlxG; 59 | import flixel.FlxSprite; 60 | import flixel.FlxState; 61 | import flixel.graphics.FlxGraphic; 62 | 63 | class FlxExampleState extends FlxState 64 | { 65 | var wizard:FlxSprite; 66 | var level:FlxTilemap; 67 | 68 | override public function create():Void 69 | { 70 | //create a main player 71 | wizard = new FlxSprite(200, 200, 'assets/player.png'); 72 | wizard.maxVelocity.set(80, 200); 73 | wizard.acceleration.y = 200; // gravity 74 | wizard.drag.x = wizard.maxVelocity.x * 4; 75 | add(wizard); 76 | 77 | //create a tilemap level 78 | level = new FlxTilemap(); 79 | level.loadMap('assets/level.csv', FlxGraphic.fromClass(GraphicAuto), 0, 0, AUTO); 80 | add(level); 81 | } 82 | 83 | override public function update(elapsed:Float):Void 84 | { 85 | //control the player with keyboard 86 | wizard.acceleration.x = 0; 87 | 88 | if (FlxG.keys.pressed.LEFT) 89 | { 90 | wizard.acceleration.x = -wizard.maxVelocity.x * 4; 91 | } 92 | if (FlxG.keys.pressed.RIGHT) 93 | { 94 | wizard.acceleration.x = wizard.maxVelocity.x * 4; 95 | } 96 | if (FlxG.keys.justPressed.SPACE && wizard.isTouching(FLOOR)) 97 | { 98 | wizard.velocity.y = -wizard.maxVelocity.y / 2; 99 | } 100 | super.update(elapsed); 101 | } 102 | } 103 | ``` 104 | 105 | 106 | -------------------------------------------------------------------------------- /documentation/02_handbook/05-flxsave.html.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "FlxSave" 3 | apiPath: util/FlxSave.html 4 | --- 5 | 6 | ```haxe 7 | import flixel.util.FlxSave; 8 | ``` 9 | 10 | HaxeFlixel gives you the `FlxSave` class to manage saving and loading your game's data. You might use it to save and load a high score table, or the position and status of the player and enemies, or custom settings the player has selected. Like most of HaxeFlixel, `FlxSave` is cross-platform in functionality. 11 | 12 | To use `FlxSave` you need a variable typed to that class. You can create your own variable (perhaps in your registry class, in your gameplay `FlxState`, or as a local variable in your save/load functions). You may also use the one that HaxeFlixel itself uses (`FlxG.save`). 13 | 14 | The example code used below is largely taken from the [HaxeFlixel save demo](http://haxeflixel.com/demos/Save/). If you have already installed HaxeFlixel, then to install the demo project just open a command line utility, navigate to the folder you would like to install into, and enter the command `flixel create Save`, or download the source via GitHub using the link on the demo web page. 15 | 16 | #### Saving 17 | 18 | So how can you save some of your game data? Once you have your variable, you will need to initialize, then bind it: 19 | 20 | ``` haxe 21 | _gameSave = new FlxSave(); // initialize 22 | _gameSave.bind("SaveDemo"); // bind to the named save slot 23 | ``` 24 | 25 | Note the string "SaveDemo". This is how HaxeFlixel tracks what save slot you are binding to in local storage. If you want to have multiple saves, you will probably want to define a series of strings to identify each slot, eg. "SaveSlot1", "SaveSlot2", etc. and bind to the appropriate one. For more information on using multiple save slots, take a look at [Wolfgang's article](https://web.archive.org/web/20150116114005/http://www.funstormgames.com/blog/2012/01/flixel-advanced-saving-tips-tricks/) on the subject for AS3 Flixel, but keep in mind that [the AS3 syntax is a little different from Haxe](http://books.openfl.org/as3-conversion-guide/comparing-haxe-and-actionscript/overview.html). 26 | 27 | Note: If you plan to use `FlxG.save` you can skip the initializing and binding steps, as HaxeFlixel has done it for you. 28 | 29 | Once bound, the save is essentially "live". To write to it you use the .data property of variable, treating it as an [object](https://haxe.org/manual/types-dynamic.html): 30 | 31 | ``` haxe 32 | _gameSave.data.boxPositions = new Array(); 33 | _gameSave.data.boxPositions.push(box.getPosition()); 34 | 35 | _gameSave.data.enemy = myEnemy; 36 | 37 | // save data 38 | _gameSave.flush(); 39 | ``` 40 | 41 | ##### flush() 42 | Writes the local shared object to disk immediately. 43 | **Required on non-Flash targets.** 44 | 45 | ##### Serialization 46 | In certain cases you may need to [serialize and unserialize](https://haxe.org/manual/std-serialization.html) your data (fancy words for "take my data and turn it into a specially formatted string, or back into data") to avoid errors, but you may want to try it without serialization unless you experience problems. 47 | 48 | #### Loading 49 | 50 | In order to retrieve your saved data, you simply make sure you have a correctly bound `FlxSave` variable and read each value from the `.data` property. 51 | 52 | ``` haxe 53 | var position = _gameSave.data.boxPositions[tempCount]; 54 | box.setPosition(position.x, position.y); 55 | ``` 56 | 57 | This means that, depending on your save needs, when loading a save slot you may need to loop through a long list of data to assign each of the values back to it's correct home. 58 | 59 | #### Existing save data 60 | 61 | When you save data to a given `FlxSave` save slot there is, of course, the possibility that data already exists in that slot (hopefully your saved data from an earlier save). One way to test for this is to check if one of your variables is null. If save data does already exist and you plan to save an entire fresh set of new data, then to avoid carrying over values from an earlier save you may wish to either go through and initialize or reset each of the potentially saved variables to some default value (or null) before saving your new set, or you may wish to erase the save data entirely (probably not a good idea if you're using `FlxG.save`). 62 | 63 | `FlxSave` provides an `.erase()` method to help with this process, but keep in mind that calling it on a bound `FlxSave` variable will: immediately erase all the data in .data, save the slot in the erased state (any earlier data is now completely gone), and also destroy the binding to the save slot. This last point is important to note, as after the binding has been broken `FlxSave` may still let you assign to .data and even call other methods without errors to indicate that the data is not actually being stored at all. So if you do use the `.erase()` method, don't forget to call `.bind()` again before you save or load any further data. 64 | 65 | #### Other methods 66 | 67 | In the Save demo the application creates and binds a `FlxSave` variable when the demo state initializes (see `PlayState#create()`), and then leaves this variable accessible for loading and saving from that point on. This allows you to continually update the save object when necessary, but it's equally valid to create, initialize, and bind a FlxSave variable only when loading and saving. In that case you should familiarize yourself with `.close()` and `.destroy()`for safe and efficient handling of your `FlxSave`. 68 | 69 | To review these additional methods and check out any other `FlxSave` functionality in more detail, take a look at the [API documentation](http://api.haxeflixel.com/flixel/util/FlxSave.html) or look at the class definition itself (currently under the util package in the flixel library). 70 | -------------------------------------------------------------------------------- /documentation/02_handbook/06-flxtween.html.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "FlxTween" 3 | apiPath: tweens/FlxTween.html 4 | --- 5 | 6 | A `FlxTween` allows you to create smooth interpolations and animations easily. Tweening is short for [inbetweening](http://en.wikipedia.org/wiki/Inbetweening): you only have to specify start and end values and the `FlxTween` class will generate all values between those two. If you want to see a `FlxTween` in action, this [tween demo](http://haxeflixel.com/demos/FlxTween/) is available. 7 | 8 | For example, if you want to move a `FlxSprite` across the screen, this code snippet would do it: 9 | 10 | ```haxe 11 | sprite.x = 200; 12 | sprite.y = 200; 13 | 14 | FlxTween.tween(sprite, { x: 600, y: 800 }, 2); 15 | ``` 16 | 17 | The first two lines specify the start position of the sprite, because the `tween()` method assumes the current position is the starting position. 18 | 19 | The first parameter is the object you want to act upon; the second parameter is the map which contains the properties you want to interpolate, and their desired target values. Here, we want to translate the sprite in x to position 600 and in y to position 800. The third parameter specifies the duration of the tween in seconds, which in this case is 2 seconds. 20 | 21 | ## Cancelling a Tween 22 | 23 | If you start a tween using the code above, it will run until the desired values are reached, then stop. As the `tween()` method returns an object of type `FlxTween`, keeping this object in a variable allows you to access the current tween running if you wish to control it. 24 | 25 | For example, this code stops the translation of the sprite if the player presses the spacebar of their keyboard: 26 | 27 | ```haxe 28 | var tween:FlxTween; 29 | 30 | public function new() 31 | { 32 | super(); 33 | // set up sprite 34 | tween = FlxTween.tween(sprite, { x:600, y:800 }, 2); 35 | } 36 | 37 | override public function update(elapsed:Float) 38 | { 39 | super.update(elapsed); 40 | 41 | if (FlxG.keys.justPressed.SPACE) 42 | tween.cancel(); 43 | } 44 | ``` 45 | 46 | ## Tweening Options 47 | 48 | The `tween()` method takes an optional fourth parameter which is a map of options. 49 | 50 | Possible values are: 51 | 52 | - `type`: choose one of these: 53 | 54 | - **FlxTween.ONESHOT**: stops and removes itself from its core container when it finishes; 55 | - **FlxTween.PERSIST**: stops when it finishes. Unlike **ONESHOT**, this type of tween stays attached to the core container when it finishes. This means you can keep a reference to this tween and call `start()` whenever you need it. This does not work with **ONESHOT**; 56 | 57 | - **FlxTween.LOOPING**: restarts immediately when it finishes; 58 | - **FlxTween.PINGPONG**: plays tween "hither and thither". This is like **LOOPING**, but every second execution is in reverse direction; 59 | 60 | - **FlxTween.BACKWARD**: plays tween in reverse direction. 61 | 62 | - `onComplete`: a callback function, which is called once the tween has finished. This is called every time the tween has finished one execution and comes in handy for repeating tweens (**LOOPING** and **PINGPONG**). The method must take a `FlxTween` and return nothing. 63 | 64 | - `ease`: an optional easer function. This can be used to make the beginning and end of a tween smoother. The [`FlxEase`](http://api.haxeflixel.com/types/flixel/tweens/FlxEase.html) class provides many static methods for this which should cover most cases. The following list shows all functions from `FlxEase`. In all of these, `In` can be replaced by `Out` or `InOut`, depending on where you want to apply the easing effect: at the beginning of the animation, at the end or at both sides. 65 | 66 | - `backIn` 67 | - `bounceIn` 68 | - `circIn` 69 | - `cubeIn` 70 | - `elasticIn` 71 | - `expoIn` 72 | - `quadIn` 73 | - `quartIn` 74 | - `quintIn` 75 | - `sineIn` 76 | 77 | - `startDelay`: time to wait before starting this tween, in seconds. 78 | 79 | - `loopDelay`: time to wait before this tween is repeated, in seconds. This only applies to **LOOPING** and **PINGPONG**. 80 | 81 | For example: 82 | 83 | ```haxe 84 | public function new() 85 | { 86 | super(); 87 | // set up sprite 88 | sprite.x = 200; 89 | sprite.y = 200; 90 | FlxTween.tween(sprite, { x: 600, y: 800 }, 2, { type: FlxTween.PINGPONG, ease: FlxEase.quadInOut, onComplete: changeColor, startDelay: 1, loopDelay: 2 }); 91 | } 92 | 93 | function changeColor(tween:FlxTween):Void 94 | { 95 | // change the color of the sprite here 96 | } 97 | ``` 98 | 99 | This code moves the sprite constantly between the two points (200|200) and (600|800), smoothly accelerating and decelerating. Each time the sprite arrives at one of those two points, its color changes. The animation starts after 1 second and then the sprite pauses at each point for 2 seconds. 100 | 101 | ## Special Tweens 102 | 103 | There are many more tweening methods in `FlxTween`, which are used for special cases: 104 | 105 | #### `color()` 106 | 107 | Tweens the red, green and blue part of a color independently, because normal tweening would screw up the colors. 108 | 109 | Usage: **color**(Sprite : `FlxSprite`, Duration : `Float`, FromColor : `Int`, ToColor : `Int`, ?FromAlpha : `Float`, ?ToAlpha : `Float`, ?Options : `TweenOptions`) 110 | 111 | Notice that unlike in the `tween()` method, the duration is specified before the color values and you have to enter the start and the end value. The options are the same as described above. 112 | 113 | #### `angle()` 114 | 115 | This method is for tweening the angle of a `FlxSprite`. 116 | 117 | Usage: **angle**(Sprite : `FlxSprite`, FromAngle : `Float`, ToAngle : `Float`, Duration : `Float`, ?Options : `TweenOptions`) 118 | 119 | #### Motion and Path Tweens 120 | 121 | The `FlxTween` class also contains the methods `linearMotion()`, `quadMotion()`, `cubicMotion()` and `circularMotion()`, which make objects follow straight lines, smooth paths or circles. 122 | 123 | The methods `linearPath()` and `quadPath()` can be used for longer paths defined through an array of points, instead of a fixed number of points. 124 | 125 | If you want to use these methods please refer to the [`FlxTween` API](http://api.haxeflixel.com/flixel/tweens/FlxTween.html). 126 | -------------------------------------------------------------------------------- /documentation/02_handbook/07-haxeflixel-conditionals.html.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "HaxeFlixel Conditionals" 3 | --- 4 | 5 | ### What is "conditional compilation"? 6 | 7 | [Conditional compilation flags](http://haxe.org/manual/lf-condition-compilation.html) are a powerful feature Haxe offers to optimize your code by only compiling certain parts of it. For example, the following pseudo-code optimizes inputs based on the target platform: 8 | 9 | ``` haxe 10 | #if (web || desktop) 11 | keyboardControls(); 12 | mouseControls(); 13 | #end 14 | 15 | #if desktop 16 | gamepadControls(); 17 | #end 18 | 19 | #if mobile 20 | touchControls(); 21 | #end 22 | ``` 23 | 24 | Basically, this means that for web or desktop targets, we want to have mouse and keyboard controls. In case of a mobile target, we want touch input. Like you can see, these so-called defines can also be nested: We only want gamepad controls to be available on non-web targets (line 4). So, all in all, these defines can be used largely like traditional if-statements, except their syntax varies slightly. 25 | 26 | For more information on what defines are available, by default check out the [OpenFL documentation](https://web.archive.org/web/20131130081557/http://www.openfl.org/archive/developer/documentation/conditional-compilation) on this topic. 27 | 28 | ### HaxeFlixel specific defines 29 | 30 | If you had a look at the OpenFL documentation, you might have found out that you can also set your own defines. When working with OpenFL, it's convenient to do so in the Project XML file. 31 | HaxeFlixel makes use of this feature and allows you to optimize your game using the following defines (a list of them can also be found in the [template](https://github.com/HaxeFlixel/flixel-templates/blob/master/default/Project.xml.tpl)): 32 | 33 | ``` 34 | // Example xml node to enable to Flixel record system. 35 | 36 | ``` 37 | 38 | #### FLX_RECORD 39 | 40 | Flixel features a powerful recording / playback feature which captures mouse and keyboard input. Since it's used rarely, we decided that it makes sense to turn it off by default. Setting this define however will enable it again. 41 | 42 | #### FLX_MOUSE_ADVANCED 43 | 44 | This define is required for middle and right mouse button input. On the flash target, a minimum flash player version of 11.2 is required. Listening to right click input will also disable the right-click menu of the flash player. There is currently no HTML5 support for this feature. 45 | 46 | #### FLX_NO_NATIVE_CURSOR 47 | 48 | By default, flixel uses the flash [native cursor API](http://www.adobe.com/devnet/flashplayer/articles/native-mouse-cursors.html). This gets rid of the almost unbearable mouse lag that is unavoidable otherwise. This define allows you to disable that - reasons for this might be that you want to target a flash player version older than 10.2 or that you need to use a cursor bigger than 32x32, which is not possible using the native cursor API. 49 | 50 | #### FLX_NO_MOUSE 51 | 52 | This allows you to optimize your game by compiling it without any mouse-related code, which can make sense for mobile targets. This is why in the template, `if="mobile"` is added to the haxedef set tag. Keep in mind that this might require you to use conditionals in your own code for anything related to `FlxG.mouse`, which does not exist if this define is set. 53 | 54 | #### FLX_NO_KEYBOARD 55 | 56 | This allows you to optimize your game by compiling it without any keyboard-related code, which can make sense for mobile targets. This is why in the template, `if="mobile"` is added to the haxedef set tag. Keep in mind that this might require you to use conditionals in your own code for anything related to `FlxG.keyboard` or `FlxG.keys`, which do not exist if this define is set. 57 | 58 | #### FLX_NO_TOUCH 59 | 60 | This allows you to optimize your game by compiling it without any touch-related code, which can make sense for desktop targets. This is why in the template, `if="desktop"` is added to the haxedef set tag. Keep in mind that this might require you to use conditionals in your own code for anything related to `FlxG.touches`, which does not exist if this define is set. 61 | 62 | #### FLX_NO_GAMEPAD 63 | 64 | This allows you to optimize your game by compiling it without any gamepad-related code. Keep in mind that this might require you to use conditionals in your own code for anything related to `FlxG.gamepads`, which does not exist if this define is set. 65 | 66 | #### FLX_NO_SOUND_TRAY 67 | 68 | This disables the flixel core sound tray, which appears whenever your adjust the volume via the 0 (mute the game), + or - keys. Note that this does not disable the ability to control the game's volume using these hotkeys, just the soundtray itself. You can disable volume control entirely by setting `FlxG.sound.muteKeys`, `FlxG.sound.volumeUpKeys` and `FlxG.sound.volumeDownKeys` to `null`. 69 | 70 | #### FLX_NO_FOCUS_LOST_SCREEN 71 | 72 | Flixel automatically pauses the game when it loses focus and shows its so-called "focus lost screen", which is basically an overlay darkening the screen area with a white "play-button" in the middle. Using this define disables that screen, but not the feature to automatically pause - use the `FlxG.autoPause` Bool for that. 73 | 74 | #### FLX_NO_DEBUG 75 | 76 | This disables the flixel core debugger, which you can toggle using the \ and \` keys. It makes sense to do so for release build, which is why `unless="debug"` is added to this tag in the template. It basically means that the flixel debugger is disabled when compiling a release, and enabled when compiling a debug build. 77 | -------------------------------------------------------------------------------- /documentation/02_handbook/08-haxeflixel-targets.html.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "HaxeFlixel Targets" 3 | --- 4 | 5 | HaxeFlixel currently supports the following targets through OpenFL: 6 | 7 | #### [Desktop](/documentation/desktop-targets) 8 | 9 | - Windows 10 | - Mac 11 | - Linux 12 | 13 | #### [Mobile](/documentation/mobile-targets) 14 | 15 | - [iOS](/documentation/ios) 16 | - [Android](/documentation/android) 17 | 18 | #### Web 19 | 20 | - Flash 21 | - HTML5 22 | 23 | Using these targets requires the appropriate SDK's and system setup assisted through the Lime setup commands. 24 | 25 | ``` 26 | lime setup windows 27 | lime setup mac 28 | lime setup android 29 | ``` 30 | 31 | ### HTML5 32 | 33 | #### General HTML5 Guidelines 34 | - **Text**: For now, you might prefer using [bitmap fonts](https://haxeflixel.com/demos/FlxBitmapText/) to avoid text issues. With regular fonts, you may favor larger text size (>12) in order to avoid blurriness, and try some [manual adjustments](https://github.com/HaxeFlixel/flixel/issues/1024) if you have a scaling problem (or when you are trying to embed fonts, which is not supported). 35 | - **Audio**: You should use regular .ogg files . Though .mp3 and .wav files are supported, SoundJS may not recognise them and might stop your project from running until you delete/replace them. 36 | - **Particles**: You should keep the particle count low and not expect much in terms of performance. 37 | -------------------------------------------------------------------------------- /documentation/02_handbook/09-desktop-targets.html.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Desktop Targets" 3 | --- 4 | 5 | The desktop targets of HaxeFlixel run on all mainstream operating systems (OSX, Windows and Linux). They are all compiled to C++ through the Hxcpp library and are rendered through interfacing with the [Simple DirectMedia Layer.](http://libsdl.org) The code for this part of the library is developed through [NME ](https://github.com/haxenme/NME)which provides dll libs that openfl interfaces with. 6 | 7 | The biggest advantage of desktop targets compared to web and mobile is the power of desktop CPU and GPU processors. More complex scenes, physics and number of objects rendered can give a larger creative freedom in the games you create. 8 | 9 | Rendering in HaxeFlixel is done through the drawTiles API. OpenGL textures are used with the GPU to render Flixel sprites. This native C++ code and use of the GPU outperforms runtimes such as the Flash Player and Adobe AIR in most circumstances substantially. 10 | 11 | ### Conditionals 12 | 13 | ``` 14 | #if cpp 15 | //your desktop code 16 | #end 17 | 18 | #if desktop 19 | //your desktop code 20 | #end 21 | ``` 22 | 23 | ### Project XML Settings 24 | 25 | Desktop platforms can use a window width and height of 0, which is a special value that uses the full resolution of the current display. 26 | 27 | ```xml 28 | 29 | ``` 30 | 31 | OpenFL also exposes the following specific settings for the desktop target: 32 | 33 | ```xml 34 | 35 | 36 | || 37 | ``` 38 | 39 | ### Compile Commands 40 | 41 | Visual Studio Code, FlashDevelop and IntelliJ IDEA support CPP desktop compilation through their GUI. 42 | 43 | #### Command Line 44 | 45 | The basic command to compile and test a native desktop target: 46 | 47 | ``` 48 | lime test windows 49 | lime test mac 50 | lime test linux -64 51 | ``` 52 | 53 | Run this command from the root folder of your project, the default project.xml will be used automatically. Using the test command will automatically launch the application created. 54 | -------------------------------------------------------------------------------- /documentation/02_handbook/10-mobile-targets.html.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Mobile Targets" 3 | --- 4 | 5 | With the penetration of mobile devices in the world ignoring mobile targets for your games and applications is ignoring a huge audience. 6 | 7 | Mobile devices even though amazing have particular bottlenecks not present on desktop targets. The bottleneck most significant to HaxeFlixel games is the low powered CPU. HaxeFlixel's answer to this is to make use of GPU acceleration provided by OpenFL. 8 | 9 | #### CPU 10 | 11 | The processing power of mobile CPUs are often the biggest bottleneck when compared to a desktop target. Mobile CPUs are constrained by low power architectures and are simply not as powerful. Manipulating pixels like bitmap filters do with Flash software rendering is simply too slow for mobile devices. HaxeFlixel has answered this for Flixel games to use the GPU for rendering your sprites instead of using software rendering like its done with Flash. 12 | 13 | #### Memory 14 | 15 | Memory on mobile devices as you can imagine does not compare to the desktop. When we talk about memory it relates to how many textures your game can store to render as well as the amount of raw data and objects in your game's runtime state. Memory lets you cache objects for quick runtime access instead of creating objects during your gameplay which may cause skipping and low performance. This is why HaxeFlixel uses destroy method and has implemented support for texture atlas'. 16 | 17 | #### Texture Size Limits 18 | 19 | Due to the nature of mobile hardware there are often maximum sizes for textures that are much lower than desktop hardware. There is no definitive guide to size limits as it depends on the hardware of each device individually. 20 | 21 | Here you can see an overview of size limits obtained from WebGL browsers [http://webglstats.com/#h_texsize](http://webglstats.com/#h_texsize) 22 | 23 | You can also look up a device on [glxbench.com](http://glxbench.com), under the GL config tab look for `GL_MAX_TEXTURE_SIZE`. 24 | 25 | Here is an overview of the variety in devices, feel free to add to the list; 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 46 | 51 | 56 | 61 | 66 | 67 | 68 | 73 | 78 | 83 | 88 | 93 | 94 | 95 | 100 | 105 | 110 | 115 | 120 | 121 | 122 | 127 | 132 | 137 | 142 | 147 | 148 | 149 | 154 | 159 | 164 | 169 | 174 | 175 | 176 | 181 | 186 | 191 | 196 | 201 | 202 | 203 | 208 | 213 | 220 | 225 | 230 | 231 | 232 | 233 | 234 | 235 | 236 | 237 | 238 | 239 |
**Device****Processor****Max Texture Size****Display Resolution****Memory**
42 | 43 | iPhone 44 | 45 | 47 | 48 | Armv6 49 | 50 | 52 | 53 | 1024x1024 54 | 55 | 57 | 58 | 480x320 59 | 60 | 62 | 63 | 128MB 64 | 65 |
69 | 70 | iPhone 3G 71 | 72 | 74 | 75 | Armv6 76 | 77 | 79 | 80 | 1024x1024 81 | 82 | 84 | 85 | 480x320 86 | 87 | 89 | 90 | 128MB 91 | 92 |
96 | 97 | iPhone 3GS 98 | 99 | 101 | 102 | Cortex-A8 103 | 104 | 106 | 107 | 2048x2048 108 | 109 | 111 | 112 | 480x320 113 | 114 | 116 | 117 | 256MB 118 | 119 |
123 | 124 | iPhone 4 125 | 126 | 128 | 129 | Cortex-A8 130 | 131 | 133 | 134 | 2048x2048 135 | 136 | 138 | 139 | 960x640 140 | 141 | 143 | 144 | 512MB 145 | 146 |
150 | 151 | iPhone 4S 152 | 153 | 155 | 156 | Cortex-A9 Dual-Core 157 | 158 | 160 | 161 | 4096x4096 162 | 163 | 165 | 166 | 960x640 167 | 168 | 170 | 171 | 512MB 172 | 173 |
177 | 178 | iPad 179 | 180 | 182 | 183 | Cortex-A8 184 | 185 | 187 | 188 | 2048x2048 189 | 190 | 192 | 193 | 1024x768 194 | 195 | 197 | 198 | 512MB 199 | 200 |
204 | 205 | iPad 2 206 | 207 | 209 | 210 | Cortex-A9 Dual-Core 211 | 212 | 214 | 215 | 2048x2048 216 | 217 | 4096x4096 (iOS 5.1) 218 | 219 | 221 | 222 | 1024x768 223 | 224 | 226 | 227 | 512MB 228 | 229 |
iPad 3Cortex-A9 Dual-Core4096x40962048x15361024MB
240 | -------------------------------------------------------------------------------- /documentation/02_handbook/11-android.html.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Android" 3 | --- 4 | 5 | 6 | 7 | The Android target makes use of a chain of frameworks to compile your native Android game from Haxe code. OpenFL uses the [Hxcpp](http://lib.haxe.org/p/hxcpp) and the [Android NDK](http://developer.android.com/tools/sdk/ndk/index.html) specifically so no virtual machine is involved. 8 | 9 | To set up android, run `lime setup android` after installing HaxeFlixel. You can choose to download necessary components (eg. Android SDK and NDK) or use existing installations. 10 | 11 | The Haxe compiler uses its ```cpp``` target to compile your ```Haxe``` code for the [LibSDL](http://libsdl.org) OpenGL library so that the Android NDK can then use this "native-code" for your Android game. You can read more about the Android NDK from Google [here](http://developer.android.com/tools/sdk/ndk/index.html), however this process is completely automated by [OpenFL](http://openfl.org). Android is part of the cpp group of targets and when developers mention ```cpp``` the topic may be relevant to HaxeFlixel Android. 12 | 13 | With [OpenFL](http://openfl.org) using native-code and OpenGL with [LibSDL](http://libsdl.org), the rendering methods are different to where Flixel started with Flash. Android uses GPU accelerated Texture Batching for the best possible performance on mobile devices. 14 | 15 | ### Conditionals 16 | 17 | ``` 18 | #if cpp 19 | //your android code 20 | #end 21 | 22 | #if android 23 | //your android code 24 | #end 25 | 26 | #if mobile 27 | //your android code 28 | #end 29 | ``` 30 | 31 | ### Project XML settings 32 | 33 | Mobile platforms can use a window width and height of 0, which is a special value that uses the full resolution of the current display. 34 | 35 | ``` 36 | 37 | ``` 38 | 39 | OpenFL also exposes the following specific settings for the Android target: 40 | 41 | ``` 42 | 43 | 44 | 45 | || 46 | ``` 47 | 48 | Custom PNG icons: (Check [Iconography / Android Developers](http://developer.android.com/design/style/iconography.html) for more info) 49 | 50 | ``` 51 | 52 | 53 | 54 | 55 | ``` 56 | 57 | ### Compile Commands 58 | 59 | Visual Studio Code, FlashDevelop and IntelliJ IDEA support Android compilation through their GUI. 60 | 61 | #### Command line 62 | 63 | The basic command to compile and test Android: 64 | 65 | ``` 66 | lime test android 67 | ``` 68 | 69 | Run this command from the root folder of your project; the default project.xml will be used automatically. For the test command to run on your device you should have it connected with ADB working correctly. 70 | 71 | If you want to use the Android simulator, add `-simulator` when running/testing. Be sure your virtual device is API >=15 and has GPU enabled. 72 | 73 | ``` 74 | lime test android -simulator 75 | ``` 76 | -------------------------------------------------------------------------------- /documentation/02_handbook/12-ios.html.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "iOS" 3 | --- 4 | 5 | 6 | 7 | The iOS target makes use of a chain of frameworks to compile your native iOS game from Haxe code. OpenFL uses the [Hxcpp](http://lib.haxe.org/p/hxcpp) and XCode natively so no virtual machine is involved. 8 | When you compile an iOS project an XCode project file is also automatically generated in the build directly so you can make use of the XCode profiler and toolset. 9 | 10 | The Haxe compiler uses it's ```cpp``` target to compile your ```Haxe``` code for the [LibSDL](http://libsdl.org) OpenGL library. 11 | iOS is is part of the cpp group of targets so when developers mention ```cpp``` the topic will may be relevant to HaxeFlixel iOS. 12 | 13 | With [OpenFL](http://openfl.org) using native-code and OpenGL with [LibSDL](http://libsdl.org), the rendering methods are different to where Flixel started with Flash. 14 | iOS uses GPU accelerated Texture Batching for the best possible performance in mobile devices. 15 | 16 | ### Conditionals 17 | ---- 18 | 19 | ``` 20 | #if cpp 21 | //your iOS code 22 | #end 23 | 24 | #if ios 25 | //your iOS code 26 | #end 27 | 28 | #if mobile 29 | //your iOS code 30 | #end 31 | ``` 32 | 33 | ### Project XML settings 34 | 35 | Mobile platforms can use a window `width` and `height` of 0, which is a special value that uses the full resolution of the current display. 36 | 37 | ``` 38 | 39 | ``` 40 | 41 | OpenFL also exposes the following specific settings for the iOS target: 42 | 43 | ``` 44 | 45 | 46 | || 47 | ``` 48 | 49 | Custom PNG icons and launch images: (Check [iOS Icon and Image Sizes Guidelines](https://developer.apple.com/library/ios/documentation/userexperience/conceptual/mobilehig/IconMatrix.html) for more info) 50 | 51 | ``` 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | ``` 67 | 68 | ### Compile Commands 69 | 70 | Visual Studio Code, FlashDevelop and IntelliJ IDEA support iOS compilation through their GUI. 71 | 72 | #### Command line 73 | 74 | The basic command to compile and test iOS: 75 | 76 | ``` 77 | lime test ios 78 | ``` 79 | 80 | Run this command from the root folder of your project, the default `Project.xml` will be used automatically. 81 | 82 | If you want to use the iOS simulator, add `-simulator` when running/testing. 83 | 84 | ``` 85 | lime test ios -simulator 86 | ``` 87 | -------------------------------------------------------------------------------- /documentation/02_handbook/13-neko.html.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Neko" 3 | --- 4 | 5 | 6 | 7 | [Neko](http://nekovm.org/) is a high-level dynamically typed programming language and virtual machine. Neko as a target of HaxeFlixel and OpenFL supports an API close to the CPP builds of HaxeFlixel. 8 | 9 | The NekoVM itself is part of the [Haxe Toolkit](http://haxe.org/doc/start/neko) and is used throughout Haxelib, Lime, OpenFL and flixel-tools to easily create cross-platform tools. Neko gives the power of the Haxe standard library to cross platform development tools. 10 | 11 | Neko itself is also used server-side in [websites](https://github.com/ufront) and general backend systems like the Haxelib. It contains a fully featured threading and socket API as well as integration with the [Apache server](http://haxe.org/doc/build/mod_neko). 12 | 13 | [Joshua Granick](http://www.joshuagranick.com/blog/): 14 | 15 | > "When NME (Now known as Lime/OpenFL) was first created, it was designed to provide graphics, sound and other media for the NekoVM, but since the performance was not yet ideal, Hugh then decided (if I have my order of events correct) to experiment with a C++ target for Haxe. It worked, and HXCPP was born." 16 | 17 | Its advantages: 18 | - Extremely fast compilation time that can run on Linux, Mac or Windows. 19 | - Since it uses almost the same API as the CPP builds, it is a quicker way to test. 20 | When you test with Flash it will use a much different part of the Haxe API. 21 | 22 | Its disadvantages: 23 | - Being a virtual machine, it is does not perform as well as a native build using the SDL builds of Lime. 24 | Performance can be close to the Flash Player depending on the context. 25 | 26 | ### Conditionals 27 | 28 | ``` 29 | #if neko 30 | //your neko code 31 | #end 32 | 33 | #if desktop 34 | //your neko code 35 | #end 36 | ``` 37 | 38 | #### Command line 39 | 40 | The basic command to compile and test the Neko target: 41 | 42 | ``` 43 | lime test neko 44 | ``` 45 | -------------------------------------------------------------------------------- /documentation/02_handbook/14-keyboard.html.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Keyboard" 3 | apiPath: input/keyboard/FlxKeyboard.html 4 | --- 5 | 6 | Keyboard input for HaxeFlixel is provided through the `FlxKeyboard` class and is available through `FlxG.keys`. 7 | 8 | ## Key Lists 9 | 10 | An object of type `FlxKeyList` contains a `Bool` for each key on the keyboard. The values are kept as an array internally, but you can easily refer to them by using special instance variables named after the key. For a full list of all available names look at the `FlxKeyList` documentation [here](http://api.haxeflixel.com/flixel/input/keyboard/FlxKeyList.html). 11 | 12 | `FlxKeyboard` uses the three key lists `pressed`, `justPressed` and `justReleased` to keep track of the keys. `pressed` contains `true` for all keys that are currently pressed. `justPressed` only contains `true` for all keys that have been pressed since the last frame. 13 | 14 | Here's an example of how to put it all together: 15 | 16 | ``` haxe 17 | override public function update(elapsed:Float):Void 18 | { 19 | if (FlxG.keys.pressed.UP) 20 | { 21 | // The up arrow key is currently pressed 22 | // This code is executed every frame, while the key is pressed 23 | } 24 | 25 | if (FlxG.keys.justPressed.LEFT) 26 | { 27 | // The left arrow key has just been pressed 28 | // This code is only executed once, on the frame immediately after the key has been pressed 29 | } 30 | 31 | if (FlxG.keys.justReleased.LEFT) 32 | { 33 | // The left arrow key has just been released 34 | // This code is only executed once, on the frame immediately after the key has been released 35 | } 36 | 37 | super.update(elapsed); 38 | } 39 | ``` 40 | 41 | ## Checking multiple keys 42 | 43 | You can check multiple keys at once using the `anyPressed()`, `anyJustPressed()` and `anyJustReleased()` methods of `FlxKeyboard`. This allows you to bind multiple keys to one action easily, for example controlling the player with either WASD or the arrow keys. These methods take an `Array` of key names (as `String`s) and return true if any of the given keys have the desired property. 44 | 45 | ``` haxe 46 | override public function update(elapsed:Float):Void 47 | { 48 | if (FlxG.keys.anyPressed([LEFT, A])) 49 | { 50 | // Move left 51 | } 52 | 53 | if (FlxG.keys.anyPressed([RIGHT, D])) 54 | { 55 | // Move right 56 | } 57 | 58 | super.update(elapsed); 59 | } 60 | ``` 61 | 62 | ## Conditionals 63 | 64 | For general information on conditionals, please refer to [this page](http://haxeflixel.com/documentation/compiler-conditionals/). 65 | 66 | * ### `FLX_NO_KEYBOARD` 67 | 68 | This can be used to remove all keyboard-related logic from HaxeFlixel for optimization purposes, which can make sense on mobile targets, which is why it is combined with `if="mobile"` in the default `Project.xml`. 69 | -------------------------------------------------------------------------------- /documentation/02_handbook/15-mouse.html.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Mouse" 3 | apiPath: input/mouse/FlxMouse.html 4 | --- 5 | 6 | Mouse input for HaxeFlixel is provided through the `FlxMouse` class and is available through `FlxG.mouse`. It is worth noting that it extends `FlxPoint`. 7 | 8 | On non-mobile targets, the mouse starts out by being visible by default. You can set the visibility via `FlxG.mouse.visible`. 9 | 10 | ## Left mouse button 11 | 12 | The most common use of `FlxG.mouse` is checking the state of the left mouse button. 13 | 14 | ``` haxe 15 | override public function update(elapsed:Float):Void 16 | { 17 | if (FlxG.mouse.pressed) 18 | { 19 | // The left mouse button is currently pressed 20 | } 21 | 22 | if (FlxG.mouse.justPressed) 23 | { 24 | // The left mouse button has just been pressed 25 | } 26 | 27 | if (FlxG.mouse.justReleased) 28 | { 29 | // The left mouse button has just been released 30 | } 31 | 32 | super.update(elapsed); 33 | } 34 | 35 | ``` 36 | 37 | Exactly the same logic can be used for the middle and right mouse buttons. The properties are postfixed by `Middle` / `Right`, e.g. `FlxG.mouse.pressedRight`. 38 | 39 | ## Cursor 40 | 41 | ```haxe 42 | import flixel.util.FlxColor; 43 | using flixel.util.FlxSpriteUtil; 44 | 45 | // Create a white circle to use as a cursor graphic 46 | var sprite = new FlxSprite(); 47 | sprite.makeGraphic(15, 15, FlxColor.TRANSPARENT); 48 | sprite.drawCircle(); 49 | 50 | // Load the sprite's graphic to the cursor 51 | FlxG.mouse.load(sprite.pixels); 52 | 53 | // Use the default mouse cursor again 54 | FlxG.mouse.unload(); 55 | 56 | // To use the system cursor: 57 | FlxG.mouse.useSystemCursor = true; 58 | ``` 59 | 60 | ## Positional data 61 | 62 | There are two kinds of position data available: 63 | 64 | * #### World position (absolute) 65 | 66 | ```haxe 67 | FlxG.mouse.x 68 | FlxG.mouse.y 69 | FlxG.mouse.getWorldPosition(); // returns x / y as a FlxPoint 70 | ``` 71 | 72 | * #### Screen position (relative) 73 | 74 | ```haxe 75 | FlxG.mouse.screenX 76 | FlxG.mouse.screenY 77 | FlxG.mouse.getScreenPosition(); // returns screenX / screenY as a FlxPoint 78 | ``` 79 | 80 | ## Mouse wheel 81 | 82 | The current "delta" value of mouse wheel is provided in a simple `Int` property. If the wheel has just been scrolled up, it will have a positive value and vice versa. If it wasn't scrolled during the current frame, it's 0. 83 | 84 | ```haxe 85 | if (FlxG.mouse.wheel != 0) 86 | { 87 | // Mouse wheel logic goes here, for example zooming in / out: 88 | FlxG.camera.zoom += (FlxG.mouse.wheel / 10); 89 | } 90 | ``` 91 | 92 | ## Flash native cursor API 93 | 94 | AS3-Flixel used a simple `Sprite` to display a bitmap graphic that is synchronized with the mouse position every frame. This approach is not optimal, as it causes what is commonly referred to as "mouse lag" - the cursor sprite lags behind the actual mouse position. Depending on the game's framerate and the player's mouse speed, this can be very noticeable and thus have a negative impact on the overall experience. 95 | 96 | HaxeFlixel leverages the [flash native cursor API](http://www.adobe.com/devnet/flashplayer/articles/native-mouse-cursors.html) for better mouse cursor performance. However, there are certain restrictions to native cursors: 97 | 98 | * They can not exceed 32x32 pixels 99 | * No negative cursors are allowed, and the positive offsets are limited to the size 100 | * The targeted flash player version must be 10.2 or higher 101 | 102 | Because of this, using the native cursor API is completely optional, see the section on the `FLX_NO_NATIVE_CURSOR` conditional. 103 | 104 | ### Custom native cursors 105 | 106 | You can use `FlxG.mouse.load()` for native cursors as usual, but if you want more fine-grained control, you can use the following functions: 107 | 108 | ```haxe 109 | FlxG.mouse.setSimpleNativeCursorData("custom", BitmapData); 110 | FlxG.mouse.registerNativeCursor("custom", MouseCursorData); 111 | ``` 112 | 113 | You can find more information on the `MouseCursorData` object [here](http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/ui/MouseCursorData.html). 114 | 115 | 116 | Use `FlxG.mouse.setNativeCursor()` to switch to an already registered native cursor. 117 | 118 | ## Conditionals 119 | 120 | For general information on conditionals, please refer to [this page](http://haxeflixel.com/documentation/compiler-conditionals/). 121 | 122 | * ### `FLX_NO_MOUSE_ADVANCED` 123 | 124 | By default, there are event listeners set up for both the middle and the right mouse button. There are two reasons for wanting to disable this: 125 | 126 | * it requires a minimum flash player version of 11.2 127 | * it removes the right-click menu of the flash-player 128 | 129 | * ### `FLX_NO_NATIVE_CURSOR` 130 | 131 | This disables the native cursor API on the flash target. For more info, check the "Flash native cursor API"-section above. 132 | 133 | * ### `FLX_NO_MOUSE` 134 | 135 | This can be used to remove all mouse-cursor-related logic from HaxeFlixel for optimization purposes, which can make sense on mobile targets, which is why it makes sense to combine this with `if="mobile"` in your `Project.xml`. 136 | -------------------------------------------------------------------------------- /documentation/02_handbook/16-gamepads.html.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Gamepads" 3 | apiPath: input/gamepad/index.html 4 | --- 5 | Gamepad input for HaxeFlixel is provided through the `FlxGamepad` class and is available through `FlxG.gamepads` and the `InputFrontEnd`. 6 | 7 | Since gamepads have a variety of manufacturers their keycodes provided to HaxeFlixel API differ from model to model. HaxeFlixel provides mappings that map buttons and sticks to common IDs for convenient use. Mappings are available for: 8 | 9 | - XInput (Xbox 360, Xbox One, etc) 10 | - PS4 11 | - OUYA 12 | - Switch Joycons/Pro Controllers 13 | - Logitech 14 | - WiiRemote 15 | - Mayflash WiiRemote 16 | - MFi 17 | - PS Vita 18 | 19 | For most gamepads HaxeFlixel will automatically detect the model and abstract the API inputs under a common "universal" gamepad model based on the Xbox 360 layout. The underlying device-specific "raw" inputs are still available for you to poll directly, if you choose. 20 | 21 | Here's some example logic for basic detection using the "universal" gamepad API: 22 | 23 | ``` haxe 24 | import flixel.FlxG; 25 | import flixel.FlxState; 26 | import flixel.input.gamepad.FlxGamepad; 27 | 28 | class PlayState extends FlxState 29 | { 30 | override public function update(elapsed:Float):Void 31 | { 32 | super.update(elapsed); 33 | 34 | // Important: can be null if there's no active gamepad yet! 35 | var gamepad:FlxGamepad = FlxG.gamepads.lastActive; 36 | if (gamepad != null) 37 | { 38 | updateGamepadInput(gamepad); 39 | } 40 | } 41 | 42 | function updateGamepadInput(gamepad:FlxGamepad):Void 43 | { 44 | if (gamepad.pressed.A) 45 | { 46 | trace("The bottom face button of the controller is pressed."); 47 | } 48 | 49 | if (gamepad.analog.justMoved.LEFT_STICK_X) 50 | { 51 | trace("The x axis of the left analog stick of the controller has been moved."); 52 | } 53 | } 54 | } 55 | ``` 56 | 57 | In this case, ```gamepad.pressed.A``` checks whether the bottom face button is pressed. On a PS4 controller this would be the "X" button, on an XBox 360 or XBox One controller this would be the "A" button. 58 | 59 | Also, the ```gamepad.pressed.A``` syntax is shorthand for ```gamepad.pressed.check(FlxGamepadInputID.A)```. You want to use the latter syntax if you need to check a variable (which would be the case if the user can customize their inputs). 60 | 61 | If you wanted to check a device-specific input, you would use the ```checkRaw``` function, like this: ```gamepad.pressed.checkRaw(PS4ID.X)``` 62 | 63 | Device-specific inputs can be found in the ```flixel.input.gamepad.id``` package. 64 | 65 | If you want to support a controller that HaxeFlixel doesn't provide the IDs for, the following methods of `FlxGamePad` methods should be helpful for working out what those IDs are: 66 | 67 | Return the ```FlxGamepadInputID``` value under the "universal" gamepad model: 68 | - `firstPressedButtonID()` 69 | - `firstJustPressedButtonID()` 70 | - `firstJustReleasedButtonID()` 71 | 72 | Return the device-specific input ID value: 73 | - `firstPressedButtonRawID()` 74 | - `firstJustPressedButtonRawID()` 75 | - `firstJustReleasedButtonRawID()` 76 | 77 | ### Conditional to remove gamepads 78 | 79 | ``` haxe 80 | FLX_NO_GAMEPAD 81 | ``` 82 | 83 | HaxeFlixel includes a [conditional](http://haxeflixel.com/documentation/haxeflixel-conditionals/) to omit using gamepads for optimization purposes if you are developing for a platform such as mobile, or your game just isn't designed for them. 84 | -------------------------------------------------------------------------------- /documentation/02_handbook/18-troubleshooting.html.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Troubleshooting" 3 | --- 4 | Unexpected behaviour one one may find with sources that are hard to determine. 5 | 6 | ## Timestep 7 | 8 | By default the library performs calculations with a fixed timestep, to change this set `FlxG.fixedTimestep = false` 9 | 10 | #### Explanation of timesteps 11 | 12 | If you are unfamiliar with timesteps, here is a quick explanation. 13 | 14 | A fixed timestep results in `FlxG.elapsed` always returning the same value in each update() iteration. The result is that the game runs "slower" if the computer can't keep up with the update speed. So for example, if the game is supposed to run at 60 FPS and it's running at 30 FPS, the user will perceive it to run at half the expected speed. 15 | 16 | A variable timestep results in `FlxG.elapsed` returning a value according to the time that passed since the last update() call, and the game running at perceivably the expected speed for the user. However if the framerate is too low and the coder hasn't been careful (or studied Numerical Analysis), it could result in unpredicted behaviour and a game that doesn't run slow but is simply unplayable or broken. 17 | 18 | ## Framerate inconsistency in an empty FlxState 19 | 20 | A possible cause for this is related to input handling. To fix, you may want to disable any inputs you don't use in your target platforms at compile time. 21 | The library offers some conditional compilation flags for this: 22 | * FLX_NO_MOUSE 23 | * FLX_NO_KEYBOARD 24 | * FLX_NO_TOUCH 25 | * FLX_NO_GAMEPAD 26 | 27 | These can be passed as parameters preceded by `-D` if compiling via command line (for example `-D FLX_NO_MOUSE`), or passed by adding them to your [Project.XML](documentation/openfl-project-xml-format/) file if you have one. For example, someone who is publishing to multiple platforms could have: 28 | 29 | ``` xml 30 | 31 | 32 | 33 | 34 | ``` 35 | If you created your [Project.XML](documentation/openfl-project-xml-format/) from a template, these options are most likely already in the file but commented out. 36 | 37 | ## Undesired stretching when window size varies 38 | 39 | Assigning a new instance of any of the classes that inherit from [BaseScaleMode](http://api.haxeflixel.com/flixel/system/scaleModes/BaseScaleMode.html) to `FlxG.scalemode` will set this to the desired scaling. However these settings may override the zoom value set when instancing a `FlxGame`. 40 | -------------------------------------------------------------------------------- /documentation/02_handbook/20-debugger-interaction.html.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Debugger - Interaction" 3 | --- 4 | The interaction tool (enabled by the ![](../images/02_handbook/debugger/icons/interactive.png) button in the debugger overlay) allows you to change game elements, e.g. move sprites, while the game is still running. 5 | 6 | It is highly recommended, however, that you pause the game using VCR's pause button ![](../images/02_handbook/debugger/icons/pause.png) before using the interaction tool. You can always resume the game by clicking VCR's play button ![](../images/02_handbook/debugger/icons/arrowRight.png) after you are done with the interaction. If the game is not paused during the interaction, objects affected by acceleration, for instance, will continue to move, making your work harder. 7 | 8 | ## Interaction tools 9 | 10 | When the interaction is enabled, a toolbar containing a few related tools is displayed on the left side of the screen. Below is a description of each tool. 11 | 12 | ### Pointer 13 | 14 | The pointer tool ![](../images/02_handbook/debugger/icons/cursorCross.png) allows you to select game elements. In order to use it, simply click elements on the screen: 15 | 16 | ![](../images/02_handbook/debugger/interaction-pointer-simple-select.gif) 17 | 18 | Currently only elements that extend `FlxSprite` can be selected (which exclude tiles of a tilemap, for instance). Elements that belong to your selection will be highlighted in red. If you click an empty space, the selection will be discarded. 19 | 20 | You can add/remove elements to/from your existing selection by holding `CTRL` when you click elements. It is also possible to add/remove a group of elements by clicking and dragging the mouse cursor to create a selection area: 21 | 22 | ![](../images/02_handbook/debugger/interaction-pointer-fine-picking.gif) 23 | 24 | If you press the `DELETE` key when elements are selected, the debugger will invoke the `kill()` method of each element in that selection. You can also press `DELETE` while holding `SHIFT` to invoke the `kill()` method and additionally remove the elements from memory, i.e. elements will be removed from Flixel's display list. 25 | 26 | ### Mover 27 | 28 | The mover tool ![](../images/02_handbook/debugger/icons/mover.png) allows you to move game objects that were selected by the pointer tool. In order to use this functionality, select any element(s) using the pointer tool, then pick the mover tool and click-and-drag *anywhere* on the screen: 29 | 30 | ![](../images/02_handbook/debugger/interaction-mover.gif) 31 | 32 | The selected elements will follow the movement of the mouse cursor until you release the mouse button. 33 | 34 | The mover tool is also activated while the `SHIFT` key is kept pressed, so you can move selected elements at any time, even when any other tool is active. After performing a selection, hold `SHIFT` then click-and-drag anywhere on the screen to move the selected element(s): 35 | 36 | ![](../images/02_handbook/debugger/interaction-mover-shortcut.gif) 37 | 38 | When you stop pressing `SHIFT`, the element(s) will stop moving and your previously active tool will become effective again. 39 | 40 | ### Transform 41 | 42 | The transform tool ![](../images/02_handbook/debugger/icons/transform.png) allows you to resize and rotate a selected game object. In order to use this functionality, select a single element using the pointer tool, then pick the transform tool and click-and-drag any of the markers around the object: 43 | 44 | ![](../images/02_handbook/debugger/interaction-transform.gif) 45 | 46 | The circular marker at the top-left corner of the selected object can be used to rotate it, while the squared markers can be used to resize it. 47 | -------------------------------------------------------------------------------- /documentation/03_resources/00-resources.html.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Resources" 3 | rootDoc: true 4 | --- 5 | Developing games in general is made easier by making the most of the resources in communities both online and offline. 6 | 7 | We are here collecting resources to help you learn and make games. Code snippets, tutorials and general information for game development is all wanted, so please make a pull request to these pages and make these resources even better! 8 | -------------------------------------------------------------------------------- /documentation/03_resources/02-openfl-project-xml-format.html.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "XML Project Format" 3 | --- 4 | Every OpenFL project uses an XML file to setup the compile settings for your projects depending on your chosen target. This includes stage size, source paths, asset paths and more. 5 | 6 | [Click here to see the Project.xml from the default HaxeFlixel template.](http://github.com/HaxeFlixel/flixel-templates/blob/master/default/Project.xml.tpl) 7 | 8 | This is a complete specification of the XML file: 9 | 10 | [Lime XML Project Format](https://lime.openfl.org/docs/project-files/xml-format/) 11 | -------------------------------------------------------------------------------- /documentation/03_resources/03-game-development-tools.html.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Game Development Tools" 3 | 4 | --- 5 | A concise list of tools useful to HaxeFlixel developers.This list is under construction. Suggest more, [here](https://github.com/HaxeFlixel/flixel/issues/2764). 6 | 7 | ## External Flixel Libraries 8 | A list of repos and libraries made with the purpose of extending HaxeFlixel's capabilities. One day, these may be officially incorporated into HaxeFlixel, but for now they serve a niche demand on their own. 9 | 10 | #### [Zerolib-flixel](https://github.com/01010111/zerolib-flixel) 11 | A library of extensions, utilities, and other helpful classes for making games quickly in haxeflixel! There's also a framework agnostic version simply called [Zerolib](https://github.com/01010111/zerolib) 12 | 13 | #### [djFlixel](https://github.com/john32b/djFlixel) 14 | djFlixel is a small library with some helpful tools for HaxeFlixel, including a multi-page menu system, keyboard/gamepad helpers, and very fun effects. 15 | 16 | #### [FlxAnimate](https://github.com/Dot-Stuff/flxanimate) 17 | A repository made by [CheemsAndFriends](https://github.com/CheemsAndFriends) and [DotWith](https://github.com/DotWith) made for playing all spritesheet formats and the mysterious but interesting export called `Texture Atlas` 18 | 19 | #### [FlxGif](https://github.com/MAJigsaw77/flxgif) 20 | [Yagp's Gif Player](https://github.com/yanrishatum/yagp/) for HaxeFlixel. 21 | 22 | #### [HxCodec](https://github.com/polybiusproxy/hxCodec) 23 | A library which adds native video support for OpenFL and HaxeFlixel. 24 | 25 | #### [flixel-depth](https://github.com/01010111/flixel-depth) 26 | 27 | Flixel Depth is a fun 3D hack for making orthogonally 3D looking games using haxeflixel. It does so primarily by offsetting sprites according to the camera's current angle and scaling the primary game window down. This is NOT real 3D, you will still be making a 2D game, so expect a lot of edge cases! 28 | 29 | #### [depth-flixel (not to be confused with flixel-depth!)](https://github.com/AustinEast/depth-flixel) 30 | 31 | A library aimed at making Stacked Sprites easy with Haxeflixel! 32 | 33 | 34 | ## Graphics Editors 35 | 36 | #### [Gimp](http://www.gimp.org/) 37 | 38 | An advanced bitmap based image editor that has many capabilities similar to commercial software. It can be used as a simple paint program, an expert quality photo retouching program, an online batch processing system, a mass production image renderer, an image format converter, etc. 39 | 40 | #### [Paint.NET](http://www.getpaint.net) 41 | With an easy-to-learn but powerful set of tools, Paint.NET can be used for photo retouching, tilemap editing, pixel art editing, and so on. It contains advanced features such as levels and curves editing, noise addition and reduction, fractal and Perlin noise generation and more, but can also be used as a simple image editor. 42 | 43 | #### [Inkscape](http://www.inkscape.org/) 44 | 45 | An advanced vector image editor with an advanced editing toolset. Inkscape has capabilities similar to commercial software such as Adobe Illustrator, CorelDraw, or Xara X. Inkscape leverages the W3C standard Scalable Vector Graphics (SVG) file format. 46 | Inkscape supports many advanced SVG features (markers, clones, alpha blending, etc.) and great care is taken in designing a streamlined interface. It is very easy to edit nodes, perform complex path operations, trace bitmaps and much more. 47 | 48 | #### [Krita](http://www.krita.org/) 49 | 50 | Krita is a free digital painting and illustration application. Krita offers CMYK support, HDR painting, perspective grids, dockers, filters, painting assistants, and many other features you would expect. 51 | 52 | #### [Aseprite](https://www.aseprite.org/) 53 | 54 | Aseprite is a program designed for drawing pixel art. It has layers, animation tools, tile map tools, blend modes, atlases, and many more useful features. It's not free, but it's a favorite for many developers. 55 | 56 | #### [Shoebox](https://renderhjs.net/shoebox/) 57 | 58 | ShoeBox is a free Adobe Air based app for Windows and Mac OS X with game and UI related tools. It has many utilities that make asset management easier, such as [sprite packing](http://renderhjs.net/shoebox/packSprites.htm), [sprite extraction](http://renderhjs.net/shoebox/extractSprites.htm), [texture ripping](http://renderhjs.net/shoebox/textureRipper.htm), [bitmap font creation](http://renderhjs.net/shoebox/bitmapFont.htm), and more. 59 | 60 | #### [Texture Packer](https://www.codeandweb.com/texturepacker) 61 | 62 | Texture Packer does one thing very well - it packs several sprites into one large image to help reduce load times for your game. It's easy to use and easy to integrate with HaxeFlixel. [This demo shows how to use a TexturePackerAtlas](http://haxeflixel.com/demos/TexturePackerAtlas/). 63 | 64 | #### [Free Texture Packer](https://free-tex-packer.com/) 65 | 66 | Free Texture Packer is an open source tool that allows you to pack multiple images into one atlas for you games or sites. 67 | 68 | ## Sound Editors 69 | 70 | #### [Audacity](https://www.audacityteam.org/) 71 | 72 | Audacity is free, open source, cross-platform audio software for multi-track recording and editing. 73 | 74 | #### [LMMS](https://lmms.io/) 75 | 76 | LMMS is a free cross-platform software which allows you to produce music with your computer. 77 | 78 | #### [ChipTone](https://sfbgames.itch.io/chiptone) 79 | 80 | An OpenFL based sound effects generator for video games, build by Tom Vian of SFBGames. Available on HTML5, Windows, and Mac! 81 | 82 | #### [LabChirp](https://labbed.net/software/labchirp/) 83 | 84 | LabChirp is a program for creating sound effects. 85 | 86 | ## Map Editors 87 | 88 | #### [Tiled Map Editor](https://www.mapeditor.org/) 89 | 90 | Tiled is a general purpose tile map editor. It is meant to be used for editing maps of any tile-based game, be it an RPG, a platformer or a Breakout clone. [This demo shows how to load a Tiled map](http://haxeflixel.com/demos/TiledEditor/). 91 | 92 | Source code: https://github.com/mapeditor/tiled 93 | 94 | #### [Ogmo Editor](https://ogmo-editor-3.github.io/) 95 | 96 | Ogmo Editor is a generic level editor for indie game developers who use Windows. It also happens to be free and open source. The editor is built to be reconfigurable, so you can set it up to work well for your game project. [This HaxeFlixel tutorial](http://haxeflixel.com/documentation/part-v-tiles-maps-and-collisions/) demonstrates how to create a simple top-down level with Ogmo. 97 | 98 | Source code: https://github.com/Ogmo-Editor-3/OgmoEditor3-CE 99 | 100 | #### [LDtk](https://ldtk.io/) 101 | 102 | LDtk is a level editor created by the lead game designer of [Dead Cells](https://store.steampowered.com/app/588650/Dead_Cells/). This editor has some extra features work nicely with Haxe and HaxeFlixel, and focuses on being easy to use. [This tutorial](https://goop.wtf/2021/06/05/loading-ldtk-maps-in-haxeflixel.html) shows you how to use LDtk tile maps with HaxeFlixel. 103 | 104 | Source code: https://github.com/deepnight/ldtk 105 | 106 | ## More Resources 107 | 108 | #### [ellisonleao/magictools](https://github.com/ellisonleao/magictools) 109 | 110 | 🎮 📝 A Github list of Game Development resources to make magic happen. 111 | 112 | #### [Newgrounds Wiki: Creator Resources](https://www.newgrounds.com/wiki/creator-resources/) 113 | 114 | Curated list of tools and software of all kind, useful for non-programming related things such as art, animation and music! 115 | 116 | #### [(Archive.org) Ludum Dare List](https://web.archive.org/web/20171030171759/http://ludumdare.com/compo/tools/) 117 | 118 | (Likely outdated) Ludum Dare hosts a great list of tools for general game development. 119 | 120 | #### [(Archive.org)PixelProspector](https://web.archive.org/web/20170527203734/http://www.pixelprospector.com/indie-resources/) 121 | 122 | (Likely outdated) Huge list of resources for game dev. A must read for indie developers. 123 | -------------------------------------------------------------------------------- /documentation/03_resources/04-compiler-conditionals.html.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Compiler Conditionals" 3 | --- 4 | The Haxe compiler provides a robust solution for cross-platform development where you can use operators to define what targets receive your code. This functionality is invaluable for HaxeFlixel since we are targeting native mobile / desktop and web targets, all with different capabilities. 5 | 6 | [Conditional Compilation in the Haxe Manual](https://haxe.org/manual/lf-condition-compilation.html) 7 | 8 | A basic example may include logic like this: 9 | 10 | ``` haxe 11 | #if desktop 12 | 13 | // desktop only code 14 | 15 | #elseif mobile 16 | 17 | // mobile only code 18 | 19 | #end 20 | ``` 21 | Conditionals relevant to your HaxeFlixel games may include: 22 | 23 | - `mobile`, `desktop`, `web` 24 | - `ios`, `android`, `windows`, `mac`, `linux`, `html5` 25 | - `flash`, `cpp`, `neko`, `js` 26 | 27 | Multiple targets can be used together: 28 | 29 | 30 | ```haxe 31 | #if (mac || linux || android) 32 | 33 | // code specific for these platforms 34 | 35 | #end 36 | ``` 37 | 38 | To define your own it is as easy as adding to your ```Project.xml```: 39 | 40 | ```xml 41 | 42 | ``` 43 | 44 | Now this will work: 45 | 46 | ```haxe 47 | #if magic 48 | // Create a dragon 49 | #end 50 | ``` 51 | 52 | Since Haxe lets you use some logic with the conditionals you can enable something just for mobile, as in: 53 | 54 | ```xml 55 | 56 | ``` 57 | -------------------------------------------------------------------------------- /documentation/03_resources/05-using-haxelib.html.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Using Haxelib" 3 | --- 4 | Haxelib is a package manager and utility that comes with your Haxe install. Here are the most used commands, the full usage docs are [available here](https://lib.haxe.org/documentation/using-haxelib/). 5 | 6 | ### Installing a Library 7 | 8 | Install a Haxelib library from [lib.haxe.org](http://lib.haxe.org/): 9 | 10 | ``` 11 | haxelib install 12 | ``` 13 | 14 | Install a Haxelib library from Git: 15 | 16 | ``` 17 | haxelib git 18 | ``` 19 | 20 | _Note: `haxelib git` enables the development directory for that library, which silently prevents `haxelib set` from working. Use `haxelib dev ` to disable it._ 21 | 22 | Update your Haxelib libraries, including the ones from Git: 23 | 24 | ``` 25 | haxelib upgrade 26 | ``` 27 | 28 | Change to different version of a library: 29 | 30 | ``` 31 | haxelib set 32 | ``` 33 | 34 | Remove a library: 35 | 36 | ``` 37 | haxelib remove 38 | ``` 39 | 40 | ### Using An Installed Library 41 | 42 | To use a library in your HaxeFlixel project, add it to your `project.xml`: 43 | 44 | ```xml 45 | 46 | ``` 47 | 48 | ### Updating Haxelib itself 49 | 50 | To make sure you are using the latest version of Haxelib you can run the `selfupdate` command. 51 | 52 | ``` 53 | haxelib selfupdate 54 | ``` 55 | -------------------------------------------------------------------------------- /documentation/03_resources/06-faq.html.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "FAQ" 3 | --- 4 | #### Do I have to learn Flixel (AS3) before HaxeFlixel? 5 | No, you have to learn HaxeFlixel to use HaxeFlixel, although previous experience with the AS3 version will help. 6 | 7 | #### Do I have to learn OpenFL to use HaxeFlixel? 8 | No, HaxeFlixel abstracts it completely. 9 | 10 | #### Are there any more tutorials? 11 | We have a dedicated [**Community Tutorials** page](https://haxeflixel.com/documentation/community-tutorials) that links to many external community made tutorials! 12 | 13 | You can find the official HaxeFlixel "Dungeon Crawler" tutorial [here](https://haxeflixel.com/documentation/tutorial/). 14 | 15 | #### I found a bug, where do I report it? 16 | On the [official GitHub repository](https://github.com/HaxeFlixel/flixel/issues). 17 | 18 | #### My sounds are lagging!? 19 | On some platforms, it helps to manually cache sounds: `FlxG.sound.cache("sound");` or `FlxG.sound.cacheAll();` to do all at once. 20 | 21 | #### My player falls off-screen after walking a certain distance! 22 | Collisions are limited to the area defined by `FlxG.worldBounds`. For example in platformers where this area needs to be larger, you need to adjust it manually. 23 | 24 | #### Can I make 3D games with HaxeFlixel? 25 | No, the framework is limited to 2D graphics. Well. Except for some [crazy](https://github.com/01010111/flixel-depth) [people](https://github.com/AustinEast/haxeflixel-3D). 26 | 27 | #### How do I protect my assets from being stolen? 28 | If you add `embed="true"` to the `` tag of the `Project.xml`, the asset files are embedded into the `.exe`. 29 | -------------------------------------------------------------------------------- /documentation/03_resources/07-community-tutorials.html.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Community Tutorials" 3 | --- 4 | While we try our best to make good documentation and a good example tutorial, we can only do so much! 5 | So this will be a big list to various external Community Tutorials made by other people! 6 | 7 | ## Written 8 | 9 | - [(2023) Tim’s Tips #1: Texture Packing Sprites](https://axolstudio.com/articles/2023-07-23-tims-tips-1-texture-packing-sprites/) 10 | 11 | ## Videos 12 | 13 | - [(Playlist - 2024) Learn Haxe with HaxeFlixel - Luke Makes Games ](https://www.youtube.com/playlist?list=PLLrBJXzcw-ddqs3tf31Qj-eN67WwR-uQa) 14 | - [(Playlist - 2021) Code Along: Breakout - Axol Studios](https://www.youtube.com/playlist?list=PL0mTR4YHxhDhD39potymkrbI44DzwTyi8) 15 | -------------------------------------------------------------------------------- /documentation/04_community/00-community.html.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Community" 3 | rootDoc: true 4 | --- 5 | HaxeFlixel is a collaborative project from [contributors all over the world](https://github.com/HaxeFlixel/flixel/graphs/contributors). 6 | 7 | If you need help or just want to chat , HaxeFlixel has a... 8 | 9 | - [Discord Server](https://discordapp.com/invite/rqEBAgF) (most active) 10 | - [Github Discussions page](https://github.com/HaxeFlixel/flixel/discussions) 11 | - [StackOverflow Tag](https://stackoverflow.com/questions/tagged/haxeflixel) 12 | 13 | Other HaxeFlixel-related pages: 14 | 15 | - [HaxeFlixel on Twitter](https://twitter.com/HaxeFlixel) 16 | - [HaxeFlixel on GitHub](http://github.com/haxeflixel) 17 | - [HaxeFlixel on IndieDB](http://www.indiedb.com/engines/haxeflixel) 18 | -------------------------------------------------------------------------------- /documentation/04_community/01-about.html.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "About" 3 | --- 4 | 5 | HaxeFlixel is an open source 2D game engine written for use with the [Open Flash Library](https://github.com/openfl) and the [Haxe Toolkit](http://haxe.org), it is completely free for personal or commercial use. It enables multi-platform development for native targets on mobile and desktop as well as Flash and HTML5 on web platforms. 6 | 7 | This project was founded by Alexander Hohlov, also known on [Beeblerox](https://github.com/Beeblerox) on GitHub, who continues to be the project lead for the [HaxeFlixel Organisation](https://github.com/HaxeFlixel) group. The project itself also has an active community with contributions from highly valued developers (by GitHub names) [GameDevSam](https://github.com/gamedevsam), [impaler](https://github.com/impaler), [Werdn](https://github.com/werdn), [ProG4mr](https://github.com/ProG4mr), [Gama11](https://github.com/gama11), [sergey-miryanov](https://github.com/sergey-miryanov) and more. 8 | 9 | > #### Haxe and OpenFL improves the longevity and opportunities for your Flixel Games. 10 | 11 | HaxeFlixel is largely based on the [ AS3 version of Flixel ](https://github.com/AdamAtomic/flixel) written by [ Adam “Atomic” Saltsman](http://www.adamatomic.com/). One of the major motivations for creating HaxeFlixel is overcoming the limitations of the ActionScript 3 language and the Adobe Flash and AIR runtime targets. HaxeFlixel has been able to incorporate and continues to add new language features of Haxe and incorporate exciting new runtime targets through OpenFL. 12 | 13 | The aim of this website is to provide HaxeFlixel with a friendly and connected web presence. It has been developed by Chris Decoster with great input from the community. It provides a place for experienced developers and beginners alike, to easily share their experiences in developing and learning how to make games. We have seen the website form a central location to share resources and improve HaxeFlixel itself. 14 | 15 | Everyone is highly encouraged to contribute to HaxeFlixel itself and the resources on this website. 16 | 17 | ![](../images/04_community/about-haxeflixel.png) 18 | 19 |
20 | 21 |
22 | 23 |

Features Overview

24 | 25 |
    26 |
  • Display thousands of moving objects
    • 27 |
  • Basic collisions between objects
    • 28 |
  • Group objects together for simplicity
    • 29 |
  • Easily generate and emit particles
    • 30 |
  • Create game levels using Tilemaps
    • 31 |
  • Text display and Bitmap Fonts
    • 32 |
  • Math & Color utilities
    • 33 |
  • Record and play back replays
    • 34 |
  • Powerful interactive debugger
    • 35 |
  • Path finding and following
    • 36 |
  • Easy object recycling
    • 37 |
38 | 39 |
40 | 41 |
42 | 43 |

Enhancements over AS3

44 | 45 |
    46 |
  • Use of a robust and powerful open source language [Haxe](http://www.haxe.org)
    • 47 |
  • Cross platform development to Linux, Mac and Windows
    • 48 |
  • Compile to Mobile and Desktop targets with native code
    • 49 |
  • Impressive Native Performance using GPU acceleration
    • 50 |
  • Advanced Physics with inbuilt Nape support
    • 51 |
  • Improved debugger and interactive console
    • 52 |
  • Texture batching and cache enhancements
    • 53 |
  • Access to OpenFL native extensions
    • 54 |
  • Flexible Asset Management System
    • 55 |
  • Integrated Tweening system
    • 56 |
57 | 58 |
59 | 60 |
61 | 62 |

Core Members

63 | 64 |
65 |
66 | 67 |
68 | 69 |

Beeblerox

70 | 71 |

The founding member and Author of HaxeFlixel, Alexander completed the first version of HaxeFlixel during 2011, his work is the reason for the project's success.

72 |
73 |
74 |
75 | 76 |
77 | 78 |

Chris

79 | 80 |

Chris is a generalist developer who has worked on various features and bug fixes for the engine and tools. Chris is also responsible for our logo, website and forum and is a long time member of the project.

81 |
82 |
83 |
84 | 85 |
86 | 87 |

GameDevSam

88 | 89 |

Sam is a formidable programmer who spends his working days doing GUI programming with AAA titles. Sam is also a passionate Indie developer and community organiser in the Baltimore area. He is responsible for many optimisations and improvements to the engine and has been a part of HaxeFlixel shortly after it began.

90 |
91 |
92 |
93 | 94 |
95 | 96 |

Gama11

97 | 98 |

Gama11 is a highly valued contributor who has taken great pride in making our codebase consistent and structured. He took the lead on the HaxeFlixel 3.x API refactor and improvements to the codebase structure general.

99 |
100 |
101 |
102 | 103 |
104 | 105 |

Larsiusprime

106 | 107 |

Lars is veteran Flixel developer who is best known for his main Indie game Defender's Quest. Lars is also the main dev behind making the flixel-ui framework.

108 |
109 |
110 |
111 | 112 |
113 | 114 |

ProG4mr

115 | 116 |

Tiago is the programmer to thank for our Nape Physics support. Tiago has a flair for great demos and style and is a great multi talented developer.

117 |
118 |
119 |
120 | 121 |
122 | 123 |

Sergey Miryanov

124 | 125 |

Sergey is an accomplished programmer who is a highly valued voice in discussions and planning for changes in the codebase. Sergey is a long time participator in the HaxeFlixel project.

126 |
127 |
128 | 129 |
130 | -------------------------------------------------------------------------------- /documentation/04_community/02-why-haxe.html.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Why a Haxe Version" 3 | --- 4 | The original ActionScript 3 version of [Flixel](http://flixel.org) has proven to be an effective codebase to make 2D games quickly and easily for the Adobe Flash and AIR runtimes. [Haxe](http://haxe.org) and the [Open Flash Library](https://github.com/openfl) provide significant enhancements and opportunities that ActionScript 3, AIR and Flash are limited by. [Haxe](http://haxe.org) and the [OpenFL](https://github.com/openfl) offers more efficient and open source native runtimes to your code base that ActionScript 3 and Adobe Flash/Air are not able to provide. HaxeFlixel still retains the same Flash Player target, but you gain a[ familiar, yet superior](http://www.openfl.org/archive/developer/documentation/actionscript-developers/) open source language [Haxe](http://haxe.org). 5 | 6 | #### Use of a superior open source, cross-compiled language 7 | 8 | Haxe as a toolkit and language provides features today that ActionScript developers have been seeking for years (ActionScript 4, cancelled code name "Next" compiler). The language ActionScript 3, although proven to be effective and easy to learn, can be a barrier itself. 9 | 10 | The Haxe language offers a familiar syntax whilst being able to cross-compile to different target languages such as native C++, Neko, HTML5, PHP, Java and more. For example OpenFL is letting you target Linux natively where Adobe has discontinued their AIR support some time ago. 11 | 12 | Haxe still lets you target Flash and AIR runtimes, whilst also opening the doors to much more. You gain the benefits of a superior language and open source runtime. For example, C++ works with OpenFL and [LibSDL](http://www.libsdl.org/), which would not be possible with Adobe's workflow. HaxeFlixel is far from the only ActionScript library being ported to Haxe. [HaxePunk](http://haxepunk.com/) and other projects can be found on [GitHub](https://github.com/languages/Haxe) and [haxelib](http://lib.haxe.org/). 13 | 14 | #### Native Targets are not a Virtual Machine 15 | 16 | Haxe is a cross-compiled language which is unlike solutions such as Adobe Air that use a virtual machine to run on different platforms. When you compile your Haxe code to a native target, it is translated into the native language itself, such as C++. Native code running on your target runtime does not share the same overheads in performance that a virtual machine has, so your code is often much faster in comparison. HaxeFlixel also takes advantage of OpenFL's use of GPU accelerated rendering through their drawTiles api. 17 | 18 | #### Open Source Extendible Framework 19 | 20 | By using the Haxe Toolkit and OpenFL, advanced developers can extend and modify anything in the toolchain right down from the compiler and the native runtime code such as HXCPP and SDL. The developers and the community behind these tools have shown a constant improvement to the projects over many years. History has shown commercial solutions do not always prioritize developer requests, and even advanced developers can't just fix their issues or bugs they find themselves. 21 | 22 | The source code for everything in the toolchain is available on GitHub: 23 | 24 | * [HaxeFlixel on GitHub](https://github.com/HaxeFlixel) 25 | * [OpenFL on GitHub](https://github.com/openfl) 26 | * [HaxeFoundation on GitHub](https://github.com/haxefoundation) 27 | -------------------------------------------------------------------------------- /documentation/04_community/03-introduction-to-haxe.html.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Introduction to Haxe" 3 | --- 4 | [Haxe](https://haxe.org) is a cross-platform toolkit for developing applications, games, multimedia and server side code natively. Cross-compiling your code offers longevity to your code base that is not possible for other methods of cross-platform development. 5 | 6 | The Haxe programming language itself is high level and strictly typed. It allows for Object Orientated programming with similar to syntax in AS3 and Java. Haxe is often learnt quickly and loved by developers coming from similar languages. Haxe is a valuable language to learn not only for games, but server-side development, command line tools and various other technologies. 7 | 8 | Haxe is an open source technology, free to use and modify. The Haxe Toolkit provides a powerful cross-platform standard library that lets your code solve problems and have a codebase that is more versatile. 9 | 10 | Backed by the [Haxe Foundation](https://haxe.org/foundation), industry sponsors and partners, it receives enterprise support and is sponsored and recognized by developers at a growing number of large companies such as Nickelodeon, Disney, TiVo, Stencyl and more. 11 | 12 | Haxe is being developed on GitHub: 13 | 14 | * https://github.com/HaxeFoundation 15 | 16 | [![](../images/04_community/haxe-logo.png)](https://haxe.org) 17 | -------------------------------------------------------------------------------- /documentation/04_community/04-introduction-to-openfl.html.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Introduction to OpenFL" 3 | --- 4 | 5 | 6 | The [Open Flash Library](http://www.openfl.org) (OpenFL) previously known as NME, is an innovative framework designed to provide fast, productive development for Windows, Mac, Linux, iOS, Android, Flash and HTML5 – all using the same source code. 7 | 8 | OpenFL has a history of providing the Flash API wherever possible however it is also used to extend upon that API. OpenFL is powered by the Haxe Toolkit's cross-compiler that lets it produce native code such as C++ for its target platforms. 9 | 10 | OpenFL has a an active community of developers building games for the web, consoles, desktop and mobile devices. OpenFL is free to use and modify and it is currently being developed [openly on GitHub](http://www.github.com/openfl). The project made from the combined work of talented and passionate developers over many years has resulted in a mature and advanced platform. 11 | 12 | OpenFL targets include native cross-compiled C++ for desktop and mobile targets, as well as web targets such as Flash, HTML5 and experimental support for Emscripten. OpenFL is written primarily in the Haxe language as well as platform specific code integrating with SDKs and native APIs. 13 | 14 | OpenFL provides HaxeFlixel with a familiar Flash API as well as an extended set of features for native targets. This includes the use of GPU accelerated texture batching through drawTiles, multi-threading and more. 15 | -------------------------------------------------------------------------------- /documentation/04_community/05-contributing.html.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Contributing" 3 | --- 4 | We welcome new contributors to this project. 5 | Being open source and followed by people all over the world, you can help in many ways. 6 | 7 | HaxeFlixel is a an [open-source](http://en.wikipedia.org/wiki/Open-source_software) project with humble beginnings 8 | sparked from a passion for the technology and game development. Everyone working on this project has come together 9 | to create a friendly and flexible approach so that this library and community is not only enjoyable, but a robust solution for cross-platform 2D games. 10 | 11 | ### Contribute Code 12 | 13 | We are built on code contributions, which we gladly welcome - see the [code contributions page.](/documentation/code-contributions) 14 | 15 | ### Publicize HaxeFlixel 16 | 17 | Help spread the word! What you can do to help: 18 | 19 | - Star our GitHub Repository. 20 | - Follow us on [Twitter](https://twitter.com/haxeflixel). 21 | - Talk about us on social media: Twitter, blogs, forums. 22 | - Write about your experiences of HaxeFlixel on your favorite blog, social network. 23 | - Write about what you are doing with HaxeFlixel to inspire others by using our forum or your own site. 24 | - Record a video about your use or tutorial using HaxeFlixel. 25 | - Make an awesome game and attribute HaxeFlixel as the technology that helped make it happen ;) 26 | 27 | ### Donations 28 | 29 | HaxeFlixel is currently accepting donations via its [Patreon page](https://www.patreon.com/haxeflixel). 30 | 31 | Please read [this blog post](http://haxeflixel.com/blog/02-HaxeFlixel-patreon/) to understand how the funds will be distributed. 32 | 33 | [@gamedevsam](https://twitter.com/gamedevsam) is the current treasurer for HaxeFlixel, [contact him](http://sambatista.com/contact) if you have any questions or suggestions regarding the use of donated funds. 34 | -------------------------------------------------------------------------------- /documentation/04_community/06-code-contributions.html.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Code Contributions" 3 | --- 4 | Contributing code to HaxeFlixel is done all through the official git repositories on [GitHub](http://www.github.com/haxeflixel). 5 | 6 | ### Use the Dev Branches 7 | 8 | All repositories except the [website](https://github.com/HaxeFlixel/haxeflixel.com) and [documentation](https://github.com/HaxeFlixel/flixel-docs) use a `dev` branch which is the main entry point for features and bugfixes to accepted into the codebase. When the code is tested by the community it is then merged into master and released on haxelib. 9 | 10 | To clarify: the `dev` branch on [flixel-addons](https://github.com/HaxeFlixel/flixel-addons) and [flixel-demos](https://github.com/HaxeFlixel/flixel-demos) is only compatible with the `dev` branch of [flixel](https://github.com/HaxeFlixel/flixel). 11 | 12 | If you are making changes to the codebase that could include breaking changes or a new API, we make use of the pull request feature and suggest developers use a feature branch model. [Feature branches](https://www.atlassian.com/git/workflows#!workflow-feature-branch) are simply new branches with your code that are named with a title relating to your code. 13 | 14 | ### Merge Approval 15 | 16 | Before a major feature is merged into core our general workflow is to get approval from a [core-contributor](https://github.com/orgs/HaxeFlixel/people) with push access. 17 | 18 | Developers do have limited time so keep in mind some simple steps to get your pull request accepted: 19 | 20 | - Clearly describe your use case or the problem/issue your code is developed for. 21 | - Conduct as much testing as possible on the supported targets of HaxeFlixel. If the code is for a specific target only make a clear note for developers to test. 22 | - Provide a link to a working, compilable demo of your code. 23 | 24 | ### Contribute to the Stack 25 | 26 | Everything about the technology stack of HaxeFlixel is open-source so you can contribute directly to the language, compiler and upstream libraries: 27 | 28 | - The language it uses [Haxe](https://github.com/Haxefoundation/haxe) 29 | - The framework it is built upon: [OpenFL](https://github.com/openfl/openfl) and [Lime](https://github.com/openfl/lime) 30 | - The core engine [flixel](https://github.com/HaxeFlixel/flixel) 31 | - Addons/Plugins to the core engine [addons](https://github.com/HaxeFlixel/flixel-addons) | [ui](https://github.com/HaxeFlixel/flixel-ui) 32 | - The official [Demos](https://github.com/HaxeFlixel/flixel-demos) 33 | - The [Flixel Tools](https://github.com/HaxeFlixel/flixel-tools) 34 | - [Project Templates](https://github.com/HaxeFlixel/flixel-templates) 35 | - This [documentation](https://github.com/HaxeFlixel/flixel-docs) 36 | - The website [haxeflixel.com](https://github.com/HaxeFlixel/haxeflixel.com) 37 | 38 | If you are wanting to contribute code, please review the [style guide](/documentation/code-style). 39 | -------------------------------------------------------------------------------- /documentation/04_community/07-code-style.html.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Code Style" 3 | --- 4 | This page contains a few notes on HaxeFlixel's code style. Note that we use [haxe-formatter](https://github.com/HaxeCheckstyle/haxe-formatter) to enforce consistent whitespace usage, bracket placement etc, so this page only focuses on naming conventions and other good practices not covered by an auto-formatter. 5 | 6 | ## Functions 7 | 8 | ### Function Names 9 | 10 | ```haxe 11 | function shootEnemy(target:Enemy, bullet:BulletType):Void 12 | ``` 13 | 14 | ...is easier to read than 15 | 16 | ```haxe 17 | function shootAtASpecificEnemyWithABulletTypeOf(target:Enemy, bullet:BulletType):Void 18 | ``` 19 | 20 | ...but still gets the idea of what this function does across. The second example has a lot of "noise"-words that don't provide any additional value. The following function name would still be acceptable, more accurate than example 1 even: 21 | 22 | ```haxe 23 | function shootBulletAtEnemy(target:Enemy, bullet:BulletType):Void 24 | ``` 25 | 26 | However, function names should also not be too short - you should be able to roughly know what a function does simply by reading its name - reading its description, if existent, should ideally not be necessary. 27 | 28 | An example for a bad / too simple name would be `shoot()` instead of `shootEnemy()`. 29 | 30 | ### Parameter Names 31 | 32 | Use lowerCamelCases for function parameters and use `this` to explicitly reference to class members (only when necessary): 33 | 34 | ``` haxe 35 | function translate(words:String, bableFish:BableFish):Void 36 | { 37 | this.words = words; 38 | } 39 | ``` 40 | 41 | Instead of: 42 | 43 | ``` haxe 44 | function translate(Words:String, BableFish:BableFish):Void 45 | { 46 | words = Words; 47 | } 48 | ``` 49 | 50 | In the core of HaxeFlixel, a lot of method parameters are capitalized (not preferred in Haxe). This is mostly legacy from the AS3 Flixel's code style and hard to change them all. However, newly written functions should follow the `lowerCamelCase` style. 51 | 52 | ## Leveraging Type Inference 53 | 54 | The Haxe compiler does not require you to declare the type of a variable ([read more](https://haxe.org/manual/type-system-type-inference.html)). 55 | 56 | ``` haxe 57 | //This is unnecessary 58 | var name:String = "Merlin"; 59 | var number:Int = 32; 60 | 61 | //This is preferred 62 | var name = "Merlin"; 63 | var number = 32; 64 | ``` 65 | 66 | In some contexts however, doing so improves the readability of the code, for example because it's not immediately obvious what return type a function has: 67 | 68 | ```haxe 69 | var mystery:Answer = createAnAnswer(); 70 | ``` 71 | 72 | ## Keyword Order 73 | 74 | The original AS3 Flixel codebase ordered keywords like `static public function`. 75 | HaxeFlixel has changed this convention to be more like every other (Haxe) library, the order of importance is as follows: 76 | 77 | 1. `override` 78 | 2. `public` / `private` 79 | 3. `static` 80 | 4. `inline` 81 | 82 | So `static public function` is changed to `public static function`. This also applies to variables eg `public static var`. 83 | 84 | ## Field Order / Class Outline 85 | 86 | The following rules apply, sorted by priority: 87 | 88 | 1. `static` fields before instance fields 89 | 2. `public` fields before `private` fields 90 | 3. regular variables before properties 91 | 4. getters and setters are the very end of a class (as they should always be private) 92 | 93 | 94 | ## Comments 95 | 96 | Comments should only be used when you can't find a way to express the same thing in code. They tend to add noise to the code base and rarely get updated when the code changes, which results in misinformation and inaccurate comments. 97 | 98 | Take the following comment section for example, it does not provide *any* additional value beyond what the code and the class / parameter names already tell you (one of the reasons why choosing good names is so important!). It should thus be removed completely. 99 | 100 | ```haxe 101 | /** 102 | * Sets the position. 103 | * 104 | * @param x The x coordinate. 105 | * @param y The y coordinate. 106 | */ 107 | public function setPosition(x:Int, y:Int):Void 108 | ``` 109 | 110 | ## Class Names 111 | 112 | All type names should be prefixed by `Flx`, e.g.: 113 | 114 | - `FlxBasic` 115 | - `FlxObject` 116 | - `FlxSprite` 117 | - etc.. 118 | 119 | Even though this is widely regarded as bad style, it still makes sense to follow this convention since it is so deeply ingrained into the flixel workflow and doing otherwise would be very inconsistent and confusing. 120 | 121 | This convention does not come without its advantages, for example you can easily tell which classes belong to the engine and which ones don't when writing a game. 122 | 123 | Under the hood types that HaxeFlixel devs will likely never see or use should not have the `Flx` prefix, this will serve as an indicator that they are off the beaten path. 124 | 125 | ## Enum Value Names 126 | 127 | The names of enum values are capitalized. The same convention applies to abstract enums. 128 | 129 | ```haxe 130 | enum FlxCameraFollowStyle 131 | { 132 | LOCKON; 133 | PLATFORMER; 134 | TOPDOWN; 135 | TOPDOWN_TIGHT; 136 | SCREEN_BY_SCREEN; 137 | NO_DEAD_ZONE; 138 | } 139 | ``` 140 | 141 | ## Using switch-case as an expression 142 | 143 | Unlike in most other languages with object-oriented syntax, everything in Haxe is an expression. This extends to `switch-case`, meaning that it evaluates to a value. This value can be assigned to a variable, passed to a function or simply returned by a function: 144 | 145 | ```haxe 146 | function getColor(color:Color):Int 147 | { 148 | return switch (color) 149 | { 150 | case Color.RED: 0xff0000; 151 | case Color.BLUE: 0x0000ff; 152 | case Color.GREEN: 0x00ff00; 153 | } 154 | } 155 | ``` 156 | 157 | This is preferable to how this code would look like in a lot of other languages, for example C#: 158 | 159 | ```csharp 160 | int getColor(Color color) { 161 | switch (color) { 162 | case Color.RED: 163 | return 0xff0000; 164 | case Color.BLUE: 165 | return 0x0000ff; 166 | case Color.GREEN: 167 | return 0x00ff00; 168 | } 169 | return 0x000000; 170 | } 171 | ``` 172 | -------------------------------------------------------------------------------- /documentation/04_community/08-website-docs.html.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: HaxeFlixel Website 3 | --- 4 | This website is built using [11ty static site](https://www.11ty.dev/) generator which compiles the files to a static site on a community sponsored host. 5 | Extensions and help with improving the website and our documentation are greatly appreciated. 6 | 7 | ### Our Documentation 8 | 9 | These documentation pages are an open-source project for the community to improve and extend. Notice the ***Edit*** button in the top right hand corner of every page. 10 | This will link you right to the GitHub page of the documentation where you can [fork and edit the pages](https://github.com/HaxeFlixel/haxeflixel.com/fork) right in the GitHub editor. 11 | Anyone of the HaxeFlixel team can merge pull requests and changes will be uploaded to our host. 12 | 13 | Everything is written in the [GitHub flavoured markdown format](https://help.github.com/articles/github-flavored-markdown). You can see the files written in markdown from the extension `*.md`. 14 | 15 | 20 | You can see a guide for the markdown [syntax here](https://help.github.com/articles/github-flavored-markdown). 21 | -------------------------------------------------------------------------------- /documentation/04_community/10-flixel-addons.html.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Flixel Addons" 3 | --- 4 | The addons are a set of very useful, but nevertheless *optional* classes that not every game is going to need. That is why they are not quite important enough to be a part of HaxeFlixel's core. 5 | 6 | ## Installing flixel-addons 7 | 8 | The addons are designed to be used with haxelib and are [hosted on the main HaxeFlixel GitHub account](https://github.com/HaxeFlixel/flixel-addons). 9 | 10 | ``` 11 | haxelib install flixel-addons 12 | ``` 13 | 14 | Now to verify you can see if flixel-addons is in your haxelib list: 15 | 16 | ``` 17 | haxelib list 18 | ``` 19 | 20 | To use the addons in a project simply add the following XML node to your OpenFL Project.xml file. 21 | 22 | ``` 23 | 24 | ``` 25 | 26 | ## What's in the addons? 27 | 28 | - Ports of [Photonstorm's Flixel Power Tools](http://www.photonstorm.com/flixel-power-tools) 29 | - [Nape](https://github.com/HaxeFlixel/nape-haxe4/) Physics integration 30 | - [Tiled](http://www.mapeditor.org/) integration 31 | - [Ogmo](http://www.ogmoeditor.com/) integration 32 | - [Spine](http://esotericsoftware.com/) integration 33 | - and much more! 34 | -------------------------------------------------------------------------------- /documentation/04_community/12-flixel-tools.html.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Flixel Tools" 3 | --- 4 | To make HaxeFlixel development easier, a set of command line tools has been developed with [Haxe](http://haxe.org) and [Neko](http://nekovm.org). With it you can easily create our demo projects, templates and more. Just like HaxeFlixel it is an open-source tool and additions/improvements from the community are welcome at the [flixel-tools GitHub repository](https://github.com/HaxeFlixel/flixel-tools). 5 | 6 | ## Installation 7 | 8 | The tools are available on haxelib: 9 | 10 | ```bash 11 | haxelib install flixel-tools 12 | ``` 13 | 14 | ## Setup 15 | 16 | To set the tools up initially / to be able to use the `flixel` alias in your console: 17 | 18 | ```bash 19 | haxelib run flixel-tools setup 20 | ``` 21 | 22 | ## Commands 23 | 24 | ### `create` (`c`) 25 | 26 | Create a new demo (in the current directory): 27 | 28 | ```bash 29 | flixel create 30 | ``` 31 | 32 | If no name or number is given, it will list all demos and prompt you for a choice, by number or name. 33 | 34 | ### `template` (`tpl`) 35 | 36 | To create a new project from the default template: 37 | 38 | ```bash 39 | flixel tpl -n 40 | ``` 41 | 42 | Any folder in the `flixel-templates` haxelib is treated as a template and can be created with the `flixel tpl ` syntax. This makes it easy to create custom templates. 43 | -------------------------------------------------------------------------------- /documentation/04_community/13-install-development-flixel.html.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Install development Flixel" 3 | --- 4 | Developers may want to contribute and / or stay updated with the bleeding edge code of HaxeFlixel. Like any development code we caution the use of it as it may not have the same amount of testing as the stable version. 5 | 6 | All new development is done on the dev branches of [HaxeFlixel's GitHub repositories](https://github.com/HaxeFlixel). 7 | 8 | **Prerequisites** 9 | 10 | * You must have completed the [Getting Started](/documentation/getting-started/) guide to have the necessary dependencies (Haxe and OpenFL). 11 | 12 | If you want to use development builds of OpenFL and Lime, please refer to these instructions: 13 | 14 | * [OpenFL development builds](https://github.com/openfl/openfl/blob/develop/README-haxelib.md#development-builds) 15 | * [Building Lime from source](https://github.com/openfl/lime#building-from-source) 16 | 17 | * Install [Git](https://git-scm.com/) 18 | 19 | Windows-only note: ensure that during the installation process, you select the non-default option that allows you to use Git from the Windows command prompt (you'll also need to re-open your command prompt window after installation for Git to become available there). 20 | 21 | **Install Flixel from GitHub** 22 | 23 | To obtain the newest version, please input the following command into your console: 24 | 25 | ``` bash 26 | haxelib git flixel https://github.com/HaxeFlixel/flixel 27 | ``` 28 | 29 | The same applies for any additional Flixel libraries: 30 | 31 | ``` bash 32 | haxelib git flixel-demos https://github.com/HaxeFlixel/flixel-demos 33 | haxelib git flixel-addons https://github.com/HaxeFlixel/flixel-addons 34 | haxelib git flixel-ui https://github.com/HaxeFlixel/flixel-ui 35 | ``` 36 | 37 | Should you want to use `haxelib set ` to switch back to released versions, be sure to run `haxelib dev ` beforehand. `haxelib git` enables the "development directory" for a library, which overrides `haxelib set` commands. 38 | 39 | **Testing the installation with the Mode demo** 40 | 41 | Navigate to `flixel-demos/Platformers/Mode`. Compile and run the game with `lime test `. 42 | 43 | **Need more help?** 44 | 45 | Get in touch with the [community](/documentation/community). 46 | -------------------------------------------------------------------------------- /documentation/images/00_getting_started/fd-appman-flixel.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HaxeFlixel/flixel-docs/d368416733fb317a52f0aea4d2cc62967b72c7a8/documentation/images/00_getting_started/fd-appman-flixel.jpg -------------------------------------------------------------------------------- /documentation/images/00_getting_started/fd-flixel-screenshots.psd: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HaxeFlixel/flixel-docs/d368416733fb317a52f0aea4d2cc62967b72c7a8/documentation/images/00_getting_started/fd-flixel-screenshots.psd -------------------------------------------------------------------------------- /documentation/images/00_getting_started/fd-flixel-template.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HaxeFlixel/flixel-docs/d368416733fb317a52f0aea4d2cc62967b72c7a8/documentation/images/00_getting_started/fd-flixel-template.jpg -------------------------------------------------------------------------------- /documentation/images/00_getting_started/hello-world.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HaxeFlixel/flixel-docs/d368416733fb317a52f0aea4d2cc62967b72c7a8/documentation/images/00_getting_started/hello-world.png -------------------------------------------------------------------------------- /documentation/images/00_getting_started/vscode/change-config.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HaxeFlixel/flixel-docs/d368416733fb317a52f0aea4d2cc62967b72c7a8/documentation/images/00_getting_started/vscode/change-config.gif -------------------------------------------------------------------------------- /documentation/images/00_getting_started/vscode/completion.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HaxeFlixel/flixel-docs/d368416733fb317a52f0aea4d2cc62967b72c7a8/documentation/images/00_getting_started/vscode/completion.png -------------------------------------------------------------------------------- /documentation/images/00_getting_started/vscode/flash-debugging.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HaxeFlixel/flixel-docs/d368416733fb317a52f0aea4d2cc62967b72c7a8/documentation/images/00_getting_started/vscode/flash-debugging.png -------------------------------------------------------------------------------- /documentation/images/00_getting_started/vscode/launch-configs.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HaxeFlixel/flixel-docs/d368416733fb317a52f0aea4d2cc62967b72c7a8/documentation/images/00_getting_started/vscode/launch-configs.png -------------------------------------------------------------------------------- /documentation/images/00_getting_started/vscode/lime-dropdowns.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HaxeFlixel/flixel-docs/d368416733fb317a52f0aea4d2cc62967b72c7a8/documentation/images/00_getting_started/vscode/lime-dropdowns.png -------------------------------------------------------------------------------- /documentation/images/00_getting_started/vscode/lime-installation.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HaxeFlixel/flixel-docs/d368416733fb317a52f0aea4d2cc62967b72c7a8/documentation/images/00_getting_started/vscode/lime-installation.png -------------------------------------------------------------------------------- /documentation/images/00_getting_started/vscode/problems.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HaxeFlixel/flixel-docs/d368416733fb317a52f0aea4d2cc62967b72c7a8/documentation/images/00_getting_started/vscode/problems.png -------------------------------------------------------------------------------- /documentation/images/00_getting_started/vscode/run-build-task.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HaxeFlixel/flixel-docs/d368416733fb317a52f0aea4d2cc62967b72c7a8/documentation/images/00_getting_started/vscode/run-build-task.png -------------------------------------------------------------------------------- /documentation/images/00_getting_started/vscode/tasks.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HaxeFlixel/flixel-docs/d368416733fb317a52f0aea4d2cc62967b72c7a8/documentation/images/00_getting_started/vscode/tasks.png -------------------------------------------------------------------------------- /documentation/images/00_getting_started/vscode/terminal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HaxeFlixel/flixel-docs/d368416733fb317a52f0aea4d2cc62967b72c7a8/documentation/images/00_getting_started/vscode/terminal.png -------------------------------------------------------------------------------- /documentation/images/00_getting_started/vscode/vscode-plus-extensions.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HaxeFlixel/flixel-docs/d368416733fb317a52f0aea4d2cc62967b72c7a8/documentation/images/00_getting_started/vscode/vscode-plus-extensions.png -------------------------------------------------------------------------------- /documentation/images/01_tutorial/browser_animated_player.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HaxeFlixel/flixel-docs/d368416733fb317a52f0aea4d2cc62967b72c7a8/documentation/images/01_tutorial/browser_animated_player.gif -------------------------------------------------------------------------------- /documentation/images/01_tutorial/browser_blue_dot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HaxeFlixel/flixel-docs/d368416733fb317a52f0aea4d2cc62967b72c7a8/documentation/images/01_tutorial/browser_blue_dot.png -------------------------------------------------------------------------------- /documentation/images/01_tutorial/browser_blue_square.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HaxeFlixel/flixel-docs/d368416733fb317a52f0aea4d2cc62967b72c7a8/documentation/images/01_tutorial/browser_blue_square.png -------------------------------------------------------------------------------- /documentation/images/01_tutorial/browser_coins.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HaxeFlixel/flixel-docs/d368416733fb317a52f0aea4d2cc62967b72c7a8/documentation/images/01_tutorial/browser_coins.png -------------------------------------------------------------------------------- /documentation/images/01_tutorial/browser_combat_hud.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HaxeFlixel/flixel-docs/d368416733fb317a52f0aea4d2cc62967b72c7a8/documentation/images/01_tutorial/browser_combat_hud.png -------------------------------------------------------------------------------- /documentation/images/01_tutorial/browser_enemy_brain.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HaxeFlixel/flixel-docs/d368416733fb317a52f0aea4d2cc62967b72c7a8/documentation/images/01_tutorial/browser_enemy_brain.png -------------------------------------------------------------------------------- /documentation/images/01_tutorial/browser_hello_world.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HaxeFlixel/flixel-docs/d368416733fb317a52f0aea4d2cc62967b72c7a8/documentation/images/01_tutorial/browser_hello_world.png -------------------------------------------------------------------------------- /documentation/images/01_tutorial/browser_hud.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HaxeFlixel/flixel-docs/d368416733fb317a52f0aea4d2cc62967b72c7a8/documentation/images/01_tutorial/browser_hud.png -------------------------------------------------------------------------------- /documentation/images/01_tutorial/browser_map_debugger.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HaxeFlixel/flixel-docs/d368416733fb317a52f0aea4d2cc62967b72c7a8/documentation/images/01_tutorial/browser_map_debugger.png -------------------------------------------------------------------------------- /documentation/images/01_tutorial/browser_options.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HaxeFlixel/flixel-docs/d368416733fb317a52f0aea4d2cc62967b72c7a8/documentation/images/01_tutorial/browser_options.png -------------------------------------------------------------------------------- /documentation/images/01_tutorial/browser_zoomed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HaxeFlixel/flixel-docs/d368416733fb317a52f0aea4d2cc62967b72c7a8/documentation/images/01_tutorial/browser_zoomed.png -------------------------------------------------------------------------------- /documentation/images/01_tutorial/ogmo_editor_blank.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HaxeFlixel/flixel-docs/d368416733fb317a52f0aea4d2cc62967b72c7a8/documentation/images/01_tutorial/ogmo_editor_blank.png -------------------------------------------------------------------------------- /documentation/images/01_tutorial/ogmo_editor_entities.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HaxeFlixel/flixel-docs/d368416733fb317a52f0aea4d2cc62967b72c7a8/documentation/images/01_tutorial/ogmo_editor_entities.png -------------------------------------------------------------------------------- /documentation/images/01_tutorial/ogmo_editor_entities_coins.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HaxeFlixel/flixel-docs/d368416733fb317a52f0aea4d2cc62967b72c7a8/documentation/images/01_tutorial/ogmo_editor_entities_coins.png -------------------------------------------------------------------------------- /documentation/images/01_tutorial/ogmo_editor_entities_enemies.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HaxeFlixel/flixel-docs/d368416733fb317a52f0aea4d2cc62967b72c7a8/documentation/images/01_tutorial/ogmo_editor_entities_enemies.png -------------------------------------------------------------------------------- /documentation/images/01_tutorial/ogmo_editor_tiles.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HaxeFlixel/flixel-docs/d368416733fb317a52f0aea4d2cc62967b72c7a8/documentation/images/01_tutorial/ogmo_editor_tiles.png -------------------------------------------------------------------------------- /documentation/images/01_tutorial/ogmo_project_entities.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HaxeFlixel/flixel-docs/d368416733fb317a52f0aea4d2cc62967b72c7a8/documentation/images/01_tutorial/ogmo_project_entities.png -------------------------------------------------------------------------------- /documentation/images/01_tutorial/ogmo_project_entities_coin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HaxeFlixel/flixel-docs/d368416733fb317a52f0aea4d2cc62967b72c7a8/documentation/images/01_tutorial/ogmo_project_entities_coin.png -------------------------------------------------------------------------------- /documentation/images/01_tutorial/ogmo_project_entities_enemies.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HaxeFlixel/flixel-docs/d368416733fb317a52f0aea4d2cc62967b72c7a8/documentation/images/01_tutorial/ogmo_project_entities_enemies.png -------------------------------------------------------------------------------- /documentation/images/01_tutorial/ogmo_project_general.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HaxeFlixel/flixel-docs/d368416733fb317a52f0aea4d2cc62967b72c7a8/documentation/images/01_tutorial/ogmo_project_general.png -------------------------------------------------------------------------------- /documentation/images/01_tutorial/ogmo_project_layers.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HaxeFlixel/flixel-docs/d368416733fb317a52f0aea4d2cc62967b72c7a8/documentation/images/01_tutorial/ogmo_project_layers.png -------------------------------------------------------------------------------- /documentation/images/01_tutorial/ogmo_project_tilesets.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HaxeFlixel/flixel-docs/d368416733fb317a52f0aea4d2cc62967b72c7a8/documentation/images/01_tutorial/ogmo_project_tilesets.png -------------------------------------------------------------------------------- /documentation/images/01_tutorial/vscode_files.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HaxeFlixel/flixel-docs/d368416733fb317a52f0aea4d2cc62967b72c7a8/documentation/images/01_tutorial/vscode_files.png -------------------------------------------------------------------------------- /documentation/images/01_tutorial/vscode_flxtext_completion.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HaxeFlixel/flixel-docs/d368416733fb317a52f0aea4d2cc62967b72c7a8/documentation/images/01_tutorial/vscode_flxtext_completion.png -------------------------------------------------------------------------------- /documentation/images/01_tutorial/vscode_override_completion.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HaxeFlixel/flixel-docs/d368416733fb317a52f0aea4d2cc62967b72c7a8/documentation/images/01_tutorial/vscode_override_completion.png -------------------------------------------------------------------------------- /documentation/images/01_tutorial/vscode_run_build_task.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HaxeFlixel/flixel-docs/d368416733fb317a52f0aea4d2cc62967b72c7a8/documentation/images/01_tutorial/vscode_run_build_task.png -------------------------------------------------------------------------------- /documentation/images/01_tutorial/vscode_target_selection.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HaxeFlixel/flixel-docs/d368416733fb317a52f0aea4d2cc62967b72c7a8/documentation/images/01_tutorial/vscode_target_selection.png -------------------------------------------------------------------------------- /documentation/images/02_handbook/debugger/console-completion.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HaxeFlixel/flixel-docs/d368416733fb317a52f0aea4d2cc62967b72c7a8/documentation/images/02_handbook/debugger/console-completion.png -------------------------------------------------------------------------------- /documentation/images/02_handbook/debugger/debugger-overlay.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HaxeFlixel/flixel-docs/d368416733fb317a52f0aea4d2cc62967b72c7a8/documentation/images/02_handbook/debugger/debugger-overlay.png -------------------------------------------------------------------------------- /documentation/images/02_handbook/debugger/draw-debug.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HaxeFlixel/flixel-docs/d368416733fb317a52f0aea4d2cc62967b72c7a8/documentation/images/02_handbook/debugger/draw-debug.png -------------------------------------------------------------------------------- /documentation/images/02_handbook/debugger/icons/arrowRight.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HaxeFlixel/flixel-docs/d368416733fb317a52f0aea4d2cc62967b72c7a8/documentation/images/02_handbook/debugger/icons/arrowRight.png -------------------------------------------------------------------------------- /documentation/images/02_handbook/debugger/icons/cursorCross.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HaxeFlixel/flixel-docs/d368416733fb317a52f0aea4d2cc62967b72c7a8/documentation/images/02_handbook/debugger/icons/cursorCross.png -------------------------------------------------------------------------------- /documentation/images/02_handbook/debugger/icons/interactive.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HaxeFlixel/flixel-docs/d368416733fb317a52f0aea4d2cc62967b72c7a8/documentation/images/02_handbook/debugger/icons/interactive.png -------------------------------------------------------------------------------- /documentation/images/02_handbook/debugger/icons/mover.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HaxeFlixel/flixel-docs/d368416733fb317a52f0aea4d2cc62967b72c7a8/documentation/images/02_handbook/debugger/icons/mover.png -------------------------------------------------------------------------------- /documentation/images/02_handbook/debugger/icons/pause.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HaxeFlixel/flixel-docs/d368416733fb317a52f0aea4d2cc62967b72c7a8/documentation/images/02_handbook/debugger/icons/pause.png -------------------------------------------------------------------------------- /documentation/images/02_handbook/debugger/icons/transform.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HaxeFlixel/flixel-docs/d368416733fb317a52f0aea4d2cc62967b72c7a8/documentation/images/02_handbook/debugger/icons/transform.png -------------------------------------------------------------------------------- /documentation/images/02_handbook/debugger/interaction-mover-shortcut.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HaxeFlixel/flixel-docs/d368416733fb317a52f0aea4d2cc62967b72c7a8/documentation/images/02_handbook/debugger/interaction-mover-shortcut.gif -------------------------------------------------------------------------------- /documentation/images/02_handbook/debugger/interaction-mover.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HaxeFlixel/flixel-docs/d368416733fb317a52f0aea4d2cc62967b72c7a8/documentation/images/02_handbook/debugger/interaction-mover.gif -------------------------------------------------------------------------------- /documentation/images/02_handbook/debugger/interaction-pointer-fine-picking.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HaxeFlixel/flixel-docs/d368416733fb317a52f0aea4d2cc62967b72c7a8/documentation/images/02_handbook/debugger/interaction-pointer-fine-picking.gif -------------------------------------------------------------------------------- /documentation/images/02_handbook/debugger/interaction-pointer-simple-select.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HaxeFlixel/flixel-docs/d368416733fb317a52f0aea4d2cc62967b72c7a8/documentation/images/02_handbook/debugger/interaction-pointer-simple-select.gif -------------------------------------------------------------------------------- /documentation/images/02_handbook/debugger/interaction-transform.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HaxeFlixel/flixel-docs/d368416733fb317a52f0aea4d2cc62967b72c7a8/documentation/images/02_handbook/debugger/interaction-transform.gif -------------------------------------------------------------------------------- /documentation/images/02_handbook/debugger/layout-right.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HaxeFlixel/flixel-docs/d368416733fb317a52f0aea4d2cc62967b72c7a8/documentation/images/02_handbook/debugger/layout-right.png -------------------------------------------------------------------------------- /documentation/images/02_handbook/debugger/nape-button.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HaxeFlixel/flixel-docs/d368416733fb317a52f0aea4d2cc62967b72c7a8/documentation/images/02_handbook/debugger/nape-button.png -------------------------------------------------------------------------------- /documentation/images/02_handbook/debugger/stats-window.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HaxeFlixel/flixel-docs/d368416733fb317a52f0aea4d2cc62967b72c7a8/documentation/images/02_handbook/debugger/stats-window.png -------------------------------------------------------------------------------- /documentation/images/02_handbook/debugger/track-player-custom.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HaxeFlixel/flixel-docs/d368416733fb317a52f0aea4d2cc62967b72c7a8/documentation/images/02_handbook/debugger/track-player-custom.png -------------------------------------------------------------------------------- /documentation/images/02_handbook/debugger/track-player.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HaxeFlixel/flixel-docs/d368416733fb317a52f0aea4d2cc62967b72c7a8/documentation/images/02_handbook/debugger/track-player.png -------------------------------------------------------------------------------- /documentation/images/02_handbook/debugger/vcr-disabled.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HaxeFlixel/flixel-docs/d368416733fb317a52f0aea4d2cc62967b72c7a8/documentation/images/02_handbook/debugger/vcr-disabled.png -------------------------------------------------------------------------------- /documentation/images/02_handbook/debugger/vcr-enabled.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HaxeFlixel/flixel-docs/d368416733fb317a52f0aea4d2cc62967b72c7a8/documentation/images/02_handbook/debugger/vcr-enabled.png -------------------------------------------------------------------------------- /documentation/images/02_handbook/debugger/view-cache.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HaxeFlixel/flixel-docs/d368416733fb317a52f0aea4d2cc62967b72c7a8/documentation/images/02_handbook/debugger/view-cache.png -------------------------------------------------------------------------------- /documentation/images/02_handbook/debugger/watch-window.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HaxeFlixel/flixel-docs/d368416733fb317a52f0aea4d2cc62967b72c7a8/documentation/images/02_handbook/debugger/watch-window.png -------------------------------------------------------------------------------- /documentation/images/02_handbook/flixel-display-list.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HaxeFlixel/flixel-docs/d368416733fb317a52f0aea4d2cc62967b72c7a8/documentation/images/02_handbook/flixel-display-list.png -------------------------------------------------------------------------------- /documentation/images/02_handbook/flixel-state-0.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HaxeFlixel/flixel-docs/d368416733fb317a52f0aea4d2cc62967b72c7a8/documentation/images/02_handbook/flixel-state-0.png -------------------------------------------------------------------------------- /documentation/images/02_handbook/flixel-state-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HaxeFlixel/flixel-docs/d368416733fb317a52f0aea4d2cc62967b72c7a8/documentation/images/02_handbook/flixel-state-1.png -------------------------------------------------------------------------------- /documentation/images/02_handbook/nekovm-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HaxeFlixel/flixel-docs/d368416733fb317a52f0aea4d2cc62967b72c7a8/documentation/images/02_handbook/nekovm-logo.png -------------------------------------------------------------------------------- /documentation/images/02_handbook/sprite-animation-example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HaxeFlixel/flixel-docs/d368416733fb317a52f0aea4d2cc62967b72c7a8/documentation/images/02_handbook/sprite-animation-example.png -------------------------------------------------------------------------------- /documentation/images/04_community/about-haxeflixel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HaxeFlixel/flixel-docs/d368416733fb317a52f0aea4d2cc62967b72c7a8/documentation/images/04_community/about-haxeflixel.png -------------------------------------------------------------------------------- /documentation/images/04_community/developers/Beeblerox.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HaxeFlixel/flixel-docs/d368416733fb317a52f0aea4d2cc62967b72c7a8/documentation/images/04_community/developers/Beeblerox.jpeg -------------------------------------------------------------------------------- /documentation/images/04_community/developers/Gama11.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HaxeFlixel/flixel-docs/d368416733fb317a52f0aea4d2cc62967b72c7a8/documentation/images/04_community/developers/Gama11.png -------------------------------------------------------------------------------- /documentation/images/04_community/developers/ProG4mr.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HaxeFlixel/flixel-docs/d368416733fb317a52f0aea4d2cc62967b72c7a8/documentation/images/04_community/developers/ProG4mr.jpeg -------------------------------------------------------------------------------- /documentation/images/04_community/developers/crazysam.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HaxeFlixel/flixel-docs/d368416733fb317a52f0aea4d2cc62967b72c7a8/documentation/images/04_community/developers/crazysam.png -------------------------------------------------------------------------------- /documentation/images/04_community/developers/impaler.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HaxeFlixel/flixel-docs/d368416733fb317a52f0aea4d2cc62967b72c7a8/documentation/images/04_community/developers/impaler.jpeg -------------------------------------------------------------------------------- /documentation/images/04_community/developers/larsiusprime.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HaxeFlixel/flixel-docs/d368416733fb317a52f0aea4d2cc62967b72c7a8/documentation/images/04_community/developers/larsiusprime.jpeg -------------------------------------------------------------------------------- /documentation/images/04_community/developers/sergey-miryanov.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HaxeFlixel/flixel-docs/d368416733fb317a52f0aea4d2cc62967b72c7a8/documentation/images/04_community/developers/sergey-miryanov.jpeg -------------------------------------------------------------------------------- /documentation/images/04_community/haxe-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HaxeFlixel/flixel-docs/d368416733fb317a52f0aea4d2cc62967b72c7a8/documentation/images/04_community/haxe-logo.png -------------------------------------------------------------------------------- /documentation/images/04_community/upgrade-guide/openfl3-shaders.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HaxeFlixel/flixel-docs/d368416733fb317a52f0aea4d2cc62967b72c7a8/documentation/images/04_community/upgrade-guide/openfl3-shaders.png -------------------------------------------------------------------------------- /documentation/images/04_community/upgrade-guide/openfl8-shaders.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HaxeFlixel/flixel-docs/d368416733fb317a52f0aea4d2cc62967b72c7a8/documentation/images/04_community/upgrade-guide/openfl8-shaders.png --------------------------------------------------------------------------------