1<!DOCTYPE html> 2<html> 3 <head> 4 <!-- Setup --> 5 <meta charset="UTF-8" /> 6 <meta content="IE=Edge" http-equiv="X-UA-Compatible" /> 7 <meta 8 name="viewport" 9 content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" 10 /> 11 <link rel="manifest" href="manifest.json" /> 12 <base href="/" /> 13 14 <!-- Title --> 15 <title>Flame Engine</title> 16 <meta property="og:title" content="Flame Engine" /> 17 <meta name="twitter:text:title" content="Flame Engine" /> 18 <meta name="twitter:title" content="Flame Engine" /> 19 <meta name="apple-mobile-web-app-title" content="Flame Engine" /> 20 21 <!-- Description --> 22 <meta 23 name="description" 24 content="Flame is a game engine built on top of Flutter. It runs on mobile, desktop, and web." 25 /> 26 <meta 27 property="og:description" 28 content="Flame is a game engine built on top of Flutter. It runs on mobile, desktop, and web." 29 /> 30 <meta 31 name="twitter:description" 32 content="Flame is a game engine built on top of Flutter. It runs on mobile, desktop, and web." 33 /> 34 35 <!-- Open Graph Data --> 36 <meta property="og:type" content="website" /> 37 <meta property="og:url" content="https://flame-engine.org/" /> 38 <meta 39 property="og:image" 40 content="/assets/images/share_image.png?alt=media" 41 /> 42 43 <!-- Twitter Share Data --> 44 <meta 45 name="twitter:image" 46 content="/assets/images/share_image.png?alt=media" 47 /> 48 <meta name="twitter:card" content="summary_large_image" /> 49 50 <!-- iOS --> 51 <meta name="apple-mobile-web-app-capable" content="yes" /> 52 <meta name="apple-mobile-web-app-status-bar-style" content="black" /> 53 <link rel="apple-touch-icon" href="assets/icons/Icon-192.png" /> 54 55 <!-- Favicon --> 56 <link rel="icon" type="image/png" href="assets/icons/favicon.png" /> 57 58 <!-- Css and stuff --> 59 <link rel="stylesheet" href="/assets/css/main.css" /> 60 <link rel="preconnect" href="https://fonts.googleapis.com" /> 61 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> 62 <link 63 href="https://fonts.googleapis.com/css?family=IBM+Plex+Mono:100,200,300,400,500&display=swap" 64 rel="stylesheet" 65 /> 66 <link 67 href="https://fonts.googleapis.com/css?family=PT+Sans:b,bi&display=swap" 68 rel="stylesheet" 69 /> 70 </head> 71 72 <body 73 class="bg-[url('/assets/images/bg.png')] bg-no-repeat bg-top bg-bg h-screen flex flex-col" 74 > 75 <div class="container mx-auto flex-1 flex flex-col"> 76 <nav 77 class="h-32 md:h-16 flex flex-col md:flex-row md:items-center justify-center md:justify-between space-y-8 md:space-y-0" 78 > 79 <div 80 class="flex-initial flex flex-col items-center justify-center md:justify-end" 81 > 82 <a href="/"> 83 <img src="assets/images/corner-logo.png" /> 84 </a> 85 </div> 86 <div 87 class="flex flex-wrap items-center justify-center justify-items-center text-accent font-extrabold space-x-8" 88 > 89 <a href="https://pub.dev/documentation/flame/latest/">API</a> 90 <a href="https://discord.gg/pxrBmy4">Discord</a> 91 <a href="https://examples.flame-engine.org/">Examples</a> 92 <a href="https://docs.flame-engine.org/latest/">Docs</a> 93 </div> 94 </nav> 95 96 <main class="flex-1"> 97 <div 98 class="flex flex-col items-stretch text-white pt-4 md:pt-6 lg:pt-4 space-y-16 md:space-y-24 lg:space-y-32" 99 > 100 <div 101 class="hero flex flex-col items-center space-y-8 py-16 md:py-18 lg:py-28" 102 > 103 <div class="flame-demo h-28 md:h-40"></div> 104 105 <p 106 class="font-bold center font-accent text-center text-3xl md:text-4xl lg:text-6xl" 107 > 108 Flexible, Open Source & Runs Everywhere 109 </p> 110 <p class="text-center text-sm md:text-sm lg:text-base"> 111 Flame is a game engine built on top of 112 <a href="https://flutter.dev/" target="_blank">Flutter</a>. It 113 runs on mobile, desktop, and web. 114 </p> 115 <div 116 class="space-y-4 flex flex-col sm:space-y-0 sm:space-x-8 sm:flex-row" 117 > 118 <a 119 class="main-button text-sm md:text-sm lg:text-bas font-bold" 120 href="https://docs.flame-engine.org/latest/" 121 >Get Started</a 122 > 123 <a 124 class="main-button text-sm md:text-sm lg:text-bas font-bold" 125 href="https://github.com/flame-engine/flame" 126 target="_blank" 127 >GitHub</a 128 > 129 </div> 130 </div> 131 132 <div class="separator flex items-center justify-center"> 133 <img src="assets/images/separator.png" /> 134 </div> 135 136 <div class="flex flex-col items-center space-y-1 lg:space-y-8"> 137 <h2 138 class="text-accent font-bold font-accent text-center text-3xl md:text-4xl lg:text-4xl" 139 > 140 Made with Flame 141 </h2> 142 <p class="max-w-md text-center"> 143 Games and apps made with the help of Flame 144 </p> 145 <div 146 class="flex flex-col md:flex-row lg:flex-row space-y-20 md:space-y-0 lg:space-x-16 py-16" 147 > 148 <a 149 href="https://idlehorizons.app.link/flame" 150 class="flex flex-col items-center game-card" 151 title="Idle Horizons:<br />Dawn of Heroes" 152 target="_blank" 153 > 154 <div class="main-border max-w-full"> 155 <div 156 class="main-border-inner max-w-full w-36 md:w-44 lg:w-56 h-36 md:h-44 lg:h-56 bg-no-repeat bg-center bg-cover" 157 style=" 158 background-image: url('/assets/images/games/game5.png'); 159 " 160 ></div> 161 </div> 162 <p 163 class="accent-with-hover font-bold text-base md: lg:text-[20px] py-5" 164 > 165 Idle Horizons:<br />Dawn of Heroes 166 </p> 167 <p 168 class="text-with-hover text-center w-10/12 leading-tight font-medium max-w-noice md:max-w-none lg:max-w-none" 169 > 170 Mobile Idle Autobattler! Place units and compete amongst the 171 best! 172 </p> 173 </a> 174 175 <a 176 href="https://play.google.com/store/apps/details?id=dev.studiocloud.gunsl
176inger" 177 class="flex flex-col items-center game-card" 178 title="Gunslinger" 179 target="_blank" 180 > 181 <div class="main-border max-w-full"> 182 <div 183 class="main-border-inner max-w-full w-36 md:w-44 lg:w-56 h-36 md:h-44 lg:h-56 bg-no-repeat bg-center bg-cover" 184 style=" 185 background-image: url('/assets/images/games/game2.png'); 186 " 187 ></div> 188 </div> 189 <p 190 class="accent-with-hover font-bold text-base md: lg:text-[20px] py-5" 191 > 192 Gunslinger 193 </p> 194 <p 195 class="text-with-hover text-center w-10/12 leading-tight font-medium max-w-noice md:max-w-none lg:max-w-none" 196 > 197 A 2D shooter roguelike game with chaotic battles to test your 198 survival skills for 10 intense minutes, Armed with unique 199 weaponry that suits your playstyle. 200 </p> 201 </a> 202 203 <a 204 href="https://store.steampowered.com/app/3731570/The_Darkblade/" 205 class="flex flex-col items-center game-card" 206 title="The Darkblade" 207 target="_blank" 208 > 209 <div class="main-border max-w-full"> 210 <div 211 class="main-border-inner max-w-full w-36 md:w-44 lg:w-56 h-36 md:h-44 lg:h-56 bg-no-repeat bg-center bg-cover" 212 style=" 213 background-image: url('/assets/images/games/game7.png'); 214 " 215 ></div> 216 </div> 217 <p 218 class="accent-with-hover font-bold text-base md: lg:text-[20px] py-5" 219 > 220 The Darkblade 221 </p> 222 <p 223 class="text-with-hover text-center w-10/12 leading-tight font-medium max-w-noice md:max-w-none lg:max-w-none" 224 > 225 The Darkblade is a souls-like 2D singleplayer RPG where you 226 battle through cursed lands, master deadly combat, and uncover 227 the truth behind a mysterious stone core â all while 228 adventuring with a loyal, cute companion by your side. 229 </p> 230 </a> 231 </div> 232 <div 233 class="flex flex-col md:flex-row lg:flex-row space-y-20 md:space-y-0 lg:space-x-16 py-16" 234 > 235 <a 236 href="https://gigabull.net/game" 237 class="flex flex-col items-center game-card" 238 title="Gigabull" 239 target="_blank" 240 > 241 <div class="main-border max-w-full"> 242 <div 243 class="main-border-inner max-w-full w-36 md:w-44 lg:w-56 h-36 md:h-44 lg:h-56 bg-no-repeat bg-center bg-cover" 244 style=" 245 background-image: url('/assets/images/games/game1.png'); 246 " 247 ></div> 248 </div> 249 <p 250 class="accent-with-hover font-bold text-base md: lg:text-[20px] py-5" 251 > 252 Gigabull 253 </p> 254 <p 255 class="text-with-hover text-center w-10/12 leading-tight font-medium max-w-noice md:max-w-none lg:max-w-none" 256 > 257 In this adventure, Gigabull, the band's namesake and the 258 universe's most nefarious horned villain, has seized 10 sacred 259 thumb drives. Each drive contains a piece of the cacophonous 260 puzzle to defeat him: a song from the album. Your mission: 261 reclaim them all. 262 </p> 263 </a> 264 265 <a 266 href="https://t.co/NTlmBb9yfq" 267 class="flex flex-col items-center game-card" 268 title="Tomb Toad" 269 target="_blank" 270 > 271 <div class="main-border max-w-full"> 272 <div 273 class="main-border-inner max-w-full w-36 md:w-44 lg:w-56 h-36 md:h-44 lg:h-56 bg-no-repeat bg-center bg-cover" 274 style=" 275 background-image: url('/assets/images/games/game4.png'); 276 " 277 ></div> 278 </div> 279 <p 280 class="accent-with-hover font-bold text-base md: lg:text-[20px] py-5" 281 > 282 Tomb Toad 283 </p> 284 <p 285 class="text-with-hover text-center w-10/12 leading-tight font-medium max-w-noice md:max-w-none lg:max-w-none" 286 > 287 Delve into dark dungeons, face fearsome foes, and ponder 288 perilous puzzles in this topsy-turvy adventure game! To 289 explore, simply rotate the world and let gravity do the rest. 290 </p> 291 </a> 292 293 <a 294 href="https://walkscape.app" 295 class="flex flex-col items-center game-card" 296 title="WalkScape" 297 target="_blank" 298 > 299 <div class="main-border max-w-full"> 300 <div 301 class="main-border-inner max-w-full w-36 md:w-44 lg:w-56 h-36 md:h-44 lg:h-56 bg-no-repeat bg-center bg-cover" 302 style=" 303 background-image: url('/assets/images/games/game6.png'); 304 " 305 ></div> 306 </div> 307 <p 308 class="accent-with-hover font-bold text-base md: lg:text-[20px] py-5" 309 > 310 WalkScape 311 </p> 312 <p 313 class="text-with-hover text-center w-10/12 leading-tight font-medium max-w-noice md:max-w-none lg:max-w-none" 314 > 315 WalkScape is a game inspired by some old school MMORPGs. But 316 this game has one major trick up its sleeve: you don't play 317 actively, but instead gain progress by walking. 318 </p> 319 </a> 320 </div> 321 <div 322 class="flex flex-col md:flex-row lg:flex-row space-y-20 md:space-y-0 lg:space-x-16 py-16" 323 > 324 <a 325 href="https://github.com/renancaraujo/watchsteroids" 326 class="flex flex-col items-center game-card" 327 title="Watchsteroids" 328 target="_blank" 329 > 330 <div class="main-border max-w-full"> 331 <div 332 class="main-border-inner max-w-full w-36 md:w-44 lg:w-56 h-36 md:h-44 lg:h-56 bg-no-repeat bg-center bg-cover" 333 style=" 334 background-image: url('/assets/images/games/game3.png'); 335 " 336 ></div> 337 </div> 338 <p 339 class="accent-with-hover font-bold text-base md: lg:text-[20px] py-5" 340 > 341 Watchsteroids 342 </p> 343 <p 344 class="text-with-hover text-center w-10/12 leading-tight font-medium max-w-noice md:max-w-none lg:max-w-none" 345 > 346 An open source Asteroids-ish game made for WearOS using the 347 Flame Engine, Flutter and watch controls. 348 </p> 349 </a> 350 </div> 351 <div class="flex flex-col items-center"> 352 <p class="text-center w-8/12 leading-tight font-medium mb-8"> 353 Millions of people have played countless Flame games. <br /> 354 Check out some of them on the Awesome Flame list. 355 </p> 356 <a 357 class="main-button text-sm md:text-base font-bold" 358 href="https://github.com/flame-engine/awesome-flame" 359 target="_blank" 360 >View Awesome Flame</a 361 > 362 </div> 363 </div> 364 365 <div class="separator flex items-center justify-center"> 366 <img src="assets/images/separator.png" /> 367 </div> 368 369 <div 370 class="flex flex-col md:flex-row-reverse lg:flex-row-reverse space-y-20 md:space-y-0 md:space-x-16" 371 > 372 <div 373 class="flex flex-col items-center justify-center flex-1 space-y-10 px-8" 374 > 375 <p 376 class="text-accent font-accent font-bold text-2xl md:text-3xl lg:text-4xl text-center leading-tight" 377 > 378 From the community, for the community 379 </p> 380 <p 381 class="text-center max-w-testimonial font-medium text-sm md:text-base" 382 > 383 Flame was created and is maintained by independent members of 384 the Flutter community. <br /> 385 Today, thousands of developers use Flame to ship games every 386 day. 387 </p> 388 <div> 389 <a 390 class="main-button font-bold text-sm md:text-base" 391 href="https://discord.gg/pxrBmy4" 392 target="_blank" 393 >Join our Discord</a 394 > 395 </div> 396 </div> 397 <div class="flex flex-col items-center justify-center flex-1"> 398 <div 399 class="max-w-testimonial-sm md:max-w-testimonial testimonial" 400 > 401 <div class="main-border mb-8"> 402 <div class="main-border-inner py-6 px-4 md:py-10 md:px-8"> 403 <p class="text-center text-sm md:text-base"> 404 "Flame strikes a great balance for developers like me, who 405 are forever torn between the desire to build our own game 406 engines, and actually shipping games. With Flame, I can 407 get as low-level as I want, while also leaving the more 408 boring and laborious details in the capable hands of 409 Flame's maintainers." 410 </p> 411 </div> 412 <div class="main-border-triangle"></div> 413 </div> 414 <div class="flex flex-row justify-end items-end space-x-2"> 415 <div class="flex flex-col items-end"> 416 <a href="https://mastodon.social/@filiph" target="_blank"> 417 <p class="text-lg">Filip Hracek</p> 418 </a> 419 <a href="https://mastodon.social/@filiph" target="_blank"> 420 <p class="text-white text-xs font-bold">Game Developer</p> 421 </a> 422 </div> 423 <a href="https://mastodon.social/@filiph" target="_blank"> 424 <div 425 class="w-10 h-10 bg-white author-photo" 426 style="background-image: url('/assets/images/filip.jpeg')" 427 ></div> 428 </a> 429 </div> 430 </div> 431 </div> 432 </div> 433 434 <div class="h-8"></div>
435 </div> 436 </main> 437 </div> 438 <footer class="w-full bg-footer"> 439 <div 440 class="container mx-auto flex-1 text-xs text-accent flex-ni flex flex-col md:flex-row py-16 items-center justify-between footer" 441 > 442 <div 443 class="flex font-extrabold space-x-0 md:space-x-10 flex-col md:flex-row space-y-4 md:space-y-0 w-full md:w-auto pb-4 md:pb-0" 444 > 445 <a href="https://docs.flame-engine.org/latest/">Docs</a> 446 <a href="https://pub.dev/documentation/flame/latest/">API</a> 447 <a href="https://discord.gg/pxrBmy4">Discord</a> 448 <a href="https://examples.flame-engine.org/">Examples</a> 449 <a href="https://github.com/flame-engine/flame">Github</a> 450 </div> 451 452 <div class="flex flex-col space-y-4 text-xs w-full md:w-auto"> 453 <a href="https://blue-fire.xyz/">Blue Fire</a> 454 <a href="https://www.youtube.com/@FlameEngineDev">Youtube</a> 455 <a href="https://github.com/flame-engine/awesome-flame" 456 >Awesome Flame</a 457 > 458 <a href="https://flameengine.creator-spring.com/">Swag Store</a> 459 <a href="https://pub.dev/packages/flame">Flame on pub.dev</a> 460 </div> 461 </div> 462 </footer> 463 </body> 464</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.