DEV Community: Official Beep8

Build a Flappy Bird Clone in Under 300 Lines of C++ — and Run It on Your Phone!

Official Beep8 — Thu, 05 Jun 2025 16:00:44 +0000

Build a Flappy Bird Clone in Under 300 Lines of C++ — and Run It on Your Phone!

What if you could write a Flappy Bird clone in modern C++, under 300 lines, and have it run at 60fps directly in your mobile browser — no Apple or Google approval required?

With BEEP-8, that dream is not just possible — it’s easy.

In this post, we’ll build a smooth, sprite-based Flappy Bird-style game using the BEEP-8 SDK, a fantasy console that combines PICO-8-style graphics with a C++20 codebase, optimized for mobile.

🎮 What is BEEP-8?

BEEP-8 is a fantasy console built for C/C++ developers. Think of it as a PICO-8-like platform but:

✅ Written in standard C++20

✅ Targeting web browsers (PC & mobile)

✅ Featuring a fixed 128×240 vertical resolution (perfect for smartphones)

✅ No app store approvals required — just ship and share a URL

✅ Includes an emulator, PPU (Pixel Processing Unit), and APU (Namco C30-style audio)

You can try live games at https://beep8.org/

Or download the SDK here:

👉 https://beep8.github.io/beep8-sdk/

🐤 The Game: FlappyFlyer

FlappyFlyer is a lightweight Flappy Bird clone featuring:

Sprite-based rendering using the PPU
A 2D physics system (gravity & jump)
Procedural pipe generation and scrolling map
Collision detection via fget() flags
Title screen and score tracking

All written in modern C++ (no float, only fixed-point fx8) and runs on BEEP-8.

🧠 Game Architecture

The core game class inherits from Pico8, the high-level BEEP-8 API wrapper:

class FlappyFlyerApp : public Pico8 {
  ...
};

It overrides the _init(), _update(), and _draw() virtual methods. These form the main loop, similar to init(), update(), and draw() in PICO-8 or Unity.

📦 Sprites and Tilemap

All environment objects — ground, pipes, sensors — are mapped via mset() or msett() calls.

Collision flags are assigned using:

fset(SPR_PIPELINE, 0xff, FLAG_WALL);

This allows fget() to easily check what the flyer touches every frame.

🧱 Procedural Pipe Generation

To keep the game lightweight, we generate the background tilemap on-the-fly as the flyer moves forward:

void generateMapColumns() {
  while( xgen_map < pos_flyer.x + 192 ) {
    ...
    mset(xt, YT_GROUND, SPR_GROUND_GREEN);
    ...
    if (xgen_map > 128 && !(xt & 7)) {
      ...
      const int ytop = ...;
      msett(xt, ytop, BG_TILE_PIPE_L_VFLIP);
      ...
    }
  }
}

Pipes are placed in pairs and a hidden SPR_SENSOR tile is added between them to detect when the player passes through for scoring.

🏃 Physics & Input

The flyer uses a basic physics loop:

v_flyer.y = v_flyer.y + GRAVITY;
pos_flyer += v_flyer;

The jump is triggered via any button:

if (!dead && btnp(BUTTON_ANY)) {
  v_flyer.y = VJUMP;
}

No third-party physics engine required!

☠️ Collision & Game Over

Each frame checks the tile beneath the flyer:

const u8 collide = checkCollision();
if (!dead) {
  dead = (collide == FLAG_WALL);
}

If the player hits a wall or falls off screen, the game resets to the title screen after a delay.

🏁 Title Screen and Score

The game features a built-in title screen with animation and score tracking.

print("\e[13;4H HI:%d", hi_score);
print("\e[15;4H SC:%d", score);

The score is only updated when the flyer passes a sensor tile (i.e., gets through the pipe pair).

📕 Here’s the full source code for the app!

#include <pico8.h>

using namespace std;  
using namespace pico8;  

namespace {
  constexpr u8  FLAG_WALL = 1;
  constexpr u8  FLAG_SENSOR = 2;
  constexpr u8  SPR_EMPTY         = 0;
  constexpr u8  SPR_FLYER         = 4;
  constexpr u8  SPR_GROUND_GREEN  = 9;
  constexpr u8  SPR_GROUND        = 8;
  constexpr u8  SPR_PIPELINE      = 16;
  constexpr u8  SPR_TITLE         = 80;
  constexpr u8  SPR_SENSOR        = 10;
  constexpr u8  SPR_CLOUD         = 12;
  constexpr fx8 VJUMP(-29,10);
  constexpr fx8 GRAVITY(17,100);
  constexpr b8PpuBgTile BG_TILE_PIPE_L = {.YTILE=1, .XTILE=9, };
  constexpr b8PpuBgTile BG_TILE_PIPE_R = {.YTILE=1, .XTILE=10, };
  constexpr b8PpuBgTile BG_TILE_PIPE_L_VFLIP = {.YTILE=1, .XTILE=9, .VFP=1 };
  constexpr b8PpuBgTile BG_TILE_PIPE_R_VFLIP = {.YTILE=1, .XTILE=10,.VFP=1 };
  constexpr u8  PAL_COIN_BLINK = 3;
  constexpr u8  PAL_SHADOW     = 4;
  constexpr u8  YT_GROUND = 23;
  constexpr BgTiles XTILES = TILES_32;
  constexpr BgTiles YTILES = TILES_32;
}

enum class  GameState { Nil, Title, Playing };

constexpr  inline u8  tileId(b8PpuBgTile tile ) {
  return static_cast<u8>((tile.YTILE << 4) | (tile.XTILE & 0x0F));
} 

class FlappyFlyerApp : public Pico8 {
  int frame = 0;
  GameState  reqReset = GameState::Nil;
  GameState  status   = GameState::Nil;
  Vec cam;
  Vec pos_flyer;
  Vec v_flyer;
  int xgen_map = 0;
  fx8 ygen;
  bool dead = false;
  bool req_red = false;
  u8 dcnt_stop_update = 0;
  int hi_score = 0;
  int score = 0;
  int disp_score = 0;
  int xlast_got_score = 0;
  int cnt_title = 0;

  int calculatePipeSpan() {
    if (score <= 10) {
      return 8;
    } else if (score <= 20) {
      static constexpr int values[] = {8, 7, 7, 7, 6};
      return rndt(values);
    } else if (score <= 50) {
      static constexpr int values[] = {7, 6, 7, 7, 7};
      return rndt(values);
    } else if (score <= 75) {
      static constexpr int values[] = {8, 7, 6, 6, 7, 6, 6};
      return rndt(values);
    } else if (score <= 100) {
      static constexpr int values[] = {7, 7, 6, 6, 6, 6, 6};
      return rndt(values);
    } else if (score <= 110) {
      static constexpr int values[] = {9, 8, 8, 7};
      return rndt(values);
    } else if (score <= 140) {
      static constexpr int values[] = {7, 6, 6, 6, 6};
      return rndt(values);
    } else if (score <= 180) {
      static constexpr int values[] = {6, 6, 6, 6, 5};
      return rndt(values);
    } else {
      static constexpr int values[] = {6, 6, 5, 5, 5};
      return rndt(values);
    }
  }

  void  generateMapColumns(){
    int xdst = pos_flyer.x + 192;
    while( xgen_map < xdst ){
      int yy;
      const u32 xt = (xgen_map >> 3) & (XTILES-1);
      mset(xt,YT_GROUND,  SPR_GROUND_GREEN);
      for( yy=YT_GROUND+1 ; yy<YTILES ; ++yy ){
        mset(xt,yy,SPR_GROUND);
      }

      xgen_map += 8; 

      if( !(xt & 7) && xgen_map > 128 ){
        for( yy=0 ; yy<YT_GROUND ; ++yy ){
          mset(xt,  yy,SPR_EMPTY);
          mset(xt+1,yy,SPR_EMPTY);
        }

        const int yt = int(ygen)>>3;
        const int ytop = yt - 3;
        for( yy=0 ; yy<ytop ; ++yy ){
          mset(xt,  yy,SPR_PIPELINE);
          mset(xt+1,yy,SPR_PIPELINE+1);
        }
        msett(xt,  ytop,BG_TILE_PIPE_L_VFLIP); 
        msett(xt+1,ytop,BG_TILE_PIPE_R_VFLIP);

        const int ybottom = ytop + calculatePipeSpan();
        if( ybottom < YT_GROUND ){ 
          msett(xt,  ybottom,BG_TILE_PIPE_L); 
          msett(xt+1,ybottom,BG_TILE_PIPE_R);
          for( yy=ybottom+1 ; yy<YT_GROUND ; ++yy ){
            mset(xt,  yy,SPR_PIPELINE);
            mset(xt+1,yy,SPR_PIPELINE+1);
          }
        }

        // sensor
        for( yy=ytop+1 ; yy<=ybottom-1 ; ++yy ){
          mset(xt+1,yy,SPR_SENSOR);
        }

        ygen += pico8::rnd(96)-fx8(48);
        ygen = pico8::mid(ygen ,32, (YT_GROUND<<3)-48 );
      }
    }
  }

  u8  checkCollision() {
    return  fget(
      mget(
        (static_cast< u32 >( pos_flyer.x ) >> 3) & (XTILES-1),
        (static_cast< u32 >( pos_flyer.y ) >> 3) & (YTILES-1)
      ),
      0xff
    );
  }

  void _init() override {
    extern  const uint8_t  b8_image_sprite0[];
    hi_score = 53;
    lsp(0, b8_image_sprite0);
    mapsetup(XTILES, YTILES,std::nullopt,B8_PPU_BG_WRAP_REPEAT,B8_PPU_BG_WRAP_REPEAT);

    fset( tileId(BG_TILE_PIPE_L) ,      0xff, FLAG_WALL);
    fset( tileId(BG_TILE_PIPE_R) ,      0xff, FLAG_WALL);
    fset( tileId(BG_TILE_PIPE_L_VFLIP) ,0xff, FLAG_WALL);
    fset( tileId(BG_TILE_PIPE_R_VFLIP) ,0xff, FLAG_WALL);
    fset( SPR_GROUND,                   0xff, FLAG_WALL);
    fset( SPR_GROUND_GREEN,             0xff, FLAG_WALL);
    fset( SPR_PIPELINE  ,               0xff, FLAG_WALL);
    fset( SPR_PIPELINE+1,               0xff, FLAG_WALL);
    fset( SPR_SENSOR,0xff,FLAG_SENSOR);

    reqReset = GameState::Title;
  }

  void updatePlaying(){
    if( (!dead) && btnp( BUTTON_ANY ) ) v_flyer.y = VJUMP;

    pos_flyer += v_flyer;
    v_flyer.y = v_flyer.y + GRAVITY;

    cam.x = pos_flyer.x - 32;
    cam.y = 0;

    pos_flyer.y = pico8::max( pos_flyer.y , 0 );

    const u8 collide = checkCollision();
    if( !dead ){
      req_red = dead = (collide == FLAG_WALL);
      if( dead ){
        dcnt_stop_update = 7;
      }
    }

    if( (!dead) && pos_flyer.x > xlast_got_score + 9 ){
      if( collide == FLAG_SENSOR )  ++score;
      hi_score = pico8::max( score , hi_score);
      xlast_got_score = pos_flyer.x;
    }

    if( dead && pos_flyer.y > 240 ) reqReset = GameState::Title;

    generateMapColumns();
  }

  void  enterTitle(){
    cnt_title = 0;
    print("\e[3;7H    ");
    print("\e[3q\e[13;4H HI:%d\e[0q" , hi_score );
    print("\e[15;4H SC:%d", score );
  }

  void  enterPlaying(){
    print("\e[2J");

    pos_flyer.set(0,64);
    v_flyer.set(fx8(2,2),0);
    xgen_map = pos_flyer.x - 64;
    ygen = pos_flyer.y;
    dead = false;
    score  = 0;
    disp_score = -1;
    xlast_got_score = 0;
    b8PpuBgTile tile = {};
    mcls(tile);
    generateMapColumns();
  }

  void  updateTitle() {
    generateMapColumns();
    cnt_title++;
    if( btnp( BUTTON_ANY ) ) reqReset = GameState::Playing;
  }

  void _update() override {
    ++frame;

    if( reqReset != GameState::Nil ){
      switch( reqReset ){
        case  GameState::Nil: break;
        case  GameState::Title:   enterTitle();   break;
        case  GameState::Playing: enterPlaying(); break;
      }
      status = reqReset; 
      reqReset = GameState::Nil;
    }

    if( dcnt_stop_update > 0 ){
      --dcnt_stop_update;
      return;
    }

    switch( status ){
      case GameState::Playing: updatePlaying(); break;
      case GameState::Title: updateTitle();     break;
      case GameState::Nil:                      break;
    }
  }

  void _draw() override {
    // Enable or disable the debug string output via dprint().
    dprintenable(false);
    pal( WHITE, RED , 3 );
    camera();

    cls(req_red ? RED : BLUE);
    req_red = false;

    setz(maxz()-1);
    camera(cam.x, cam.y);
    map(cam.x, cam.y, BG_0);

    setz(maxz()-3);

    const u8 palsel = 1;
    pal(WHITE, BLACK, palsel);

    // Draw the yellow round-faced Foo sprite.
    switch( status ){
      case  GameState::Nil:
      case  GameState::Title:{
        camera();
        setz(1);
        spr(SPR_TITLE,4, pico8::min(48,(cnt_title*3)-32),15,4);
        const u8 anm = ((cnt_title>>3)&1)<<1;
        spr(SPR_FLYER + anm, (cnt_title+44)&255, 140, 2, 2);
      }break;
      case  GameState::Playing:{
        const u8 anm = dead ? 0 : ((static_cast< u32 >( pos_flyer.y ) >> 3) & 1)<<1;
        spr(SPR_FLYER + anm, pos_flyer.x-8, pos_flyer.y-8, 2, 2, false, dead );

        if( score != disp_score ){
          disp_score = score; 
          print("\e[21;1H%d",disp_score);
        }
      }break;
    }

    camera();
    setz(maxz());
    spr(SPR_CLOUD, (((255-(frame>>2)))&255)-64,7,4,4);
  }
public: virtual ~FlappyFlyerApp(){}
};

int main() {
  FlappyFlyerApp  app;
  app.run();
  return 0;
}

📦 Source Code

The full source code is already short and clean — under 300 lines — thanks to the tight BEEP-8 API.

Want to try it yourself?

Download the SDK here: https://beep8.github.io/beep8-sdk/
Drop the main.cpp into the app/ folder
Run the game using the BEEP-8 build system
Open it in your browser — no installation, no approval needed

🚀 Conclusion

With BEEP-8, writing retro-style mobile games in pure C++ becomes simple and fun. Whether you're building a jam game or learning game programming, BEEP-8 gives you:

✅ True 60fps sprite rendering

✅ Easy input and collision APIs

✅ Simple sprite/tilemap management

✅ Out-of-the-box mobile support

✅ Zero deployment stress

Give it a try at https://beep8.org/ and let your C++ creativity soar.

Got questions or want to see more BEEP-8 tutorials? Drop a comment below or check out the SDK docs.

Happy coding! 🚀

Getting Started with C++20 Ranges: Write Cleaner and Safer Loops

Official Beep8 — Thu, 05 Jun 2025 15:12:33 +0000

Getting Started with C++20 Ranges: Write Cleaner and Safer Loops

If you've ever written a loop that filters, transforms, or slices a collection manually, you know how verbose and error-prone it can get.

C++20 introduces the <ranges> library, which allows you to express these operations clearly and safely, using a declarative and composable style.

In this article, we'll walk through the essentials of C++20 ranges — focusing on real-world use cases that will make your code shorter, safer, and more readable.

✅ What Are Ranges?

At a high level, ranges combine the container and the algorithm into a single, chainable expression.

Instead of writing this:

std::vector<int> result;
for (int x : input) {
    if (x % 2 == 0) {
        result.push_back(x * x);
    }
}

You can now write:

auto result = input 
    | std::views::filter([](int x) { return x % 2 == 0; })
    | std::views::transform([](int x) { return x * x; });

This is concise, expressive, and lazy-evaluated, meaning no unnecessary copies unless you actually use the results.

✅ Basic Setup

To use ranges, include:

#include <ranges>
#include <vector>
#include <iostream>

Make sure your compiler supports C++20. For GCC or Clang, you may need to pass -std=c++20.

✅ Practical Example: Filtering Even Numbers

std::vector<int> data = {1, 2, 3, 4, 5, 6};

auto evens = data 
    | std::views::filter([](int x) { return x % 2 == 0; });

for (int x : evens) {
    std::cout << x << " ";
}
// Output: 2 4 6

No need to write an explicit if in the loop — just describe what you want.

✅ Transforming Values: Square Each Number

auto squares = data 
    | std::views::transform([](int x) { return x * x; });

for (int x : squares) {
    std::cout << x << " ";
}
// Output: 1 4 9 16 25 36

Perfect for applying a function to every element.

✅ Combining Views: Filter and Then Transform

Here's where ranges shine — chaining multiple views:

auto even_squares = data
    | std::views::filter([](int x) { return x % 2 == 0; })
    | std::views::transform([](int x) { return x * x; });

for (int x : even_squares) {
    std::cout << x << " ";
}
// Output: 4 16 36

This kind of code used to take 5+ lines and intermediate containers — now it's just one pipeline.

✅ Taking and Dropping Elements

You can slice ranges without dealing with iterators:

auto first_three = data 
    | std::views::take(3);

for (int x : first_three) {
    std::cout << x << " ";
}
// Output: 1 2 3

Likewise:

auto skip_two = data 
    | std::views::drop(2);

for (int x : skip_two) {
    std::cout << x << " ";
}
// Output: 3 4 5 6

No begin() + n needed!

✅ Converting Views to Containers

Views are lazy — they don’t create new containers unless you explicitly request one:

std::vector<int> result(
    even_squares.begin(), even_squares.end()
);

Alternatively, use a helper library like range-v3 or std::ranges::to in C++23.

✅ Why Should You Use Ranges?

✅ Removes boilerplate loops

✅ Avoids intermediate containers

✅ Makes intent clearer

✅ Encourages functional composition

✅ More type-safe than raw iterators

⚠️ Gotchas

Views don’t own data — if the original container goes out of scope, the view becomes invalid.
Not all STL algorithms are ranges-enabled yet (std::ranges::sort, etc. is available though).
May have compilation issues on older compilers or incomplete standard libraries.

Final Thoughts

C++20 ranges bring modern, declarative iteration to C++.

If you've ever felt envious of LINQ in C#, or Python list comprehensions — this is your new best friend in C++.

✍️ Summary

std::views::filter, transform, take, drop are your new loop tools
Ranges let you focus on what to do, not how
Safer, more elegant, and often faster than manual loops

Have you tried ranges in your own codebase yet? Let me know how it changed your workflow — or what hurdles you're running into.

Follow me for more modern C++ tips — and feel free to share your favorite ranges trick in the comments!

What’s New in C++20: A Practical Guide for Everyday C++ Developers

Official Beep8 — Thu, 05 Jun 2025 15:05:24 +0000

What’s New in C++20: A Practical Guide for Everyday C++ Developers

If you’re a C++ developer who has stuck with C++11, C++14, or C++17, you might be wondering what’s in it for you in C++20. The answer is: a lot. From powerful new language features to quality-of-life improvements, C++20 makes modern C++ development more expressive, readable, and efficient.

In this article, I’ll walk you through the most practical and impactful additions in C++20, especially for developers already comfortable with "classic" C++.

✅ 1. `auto` with Lambdas (Template Lambdas)

You can now write lambdas that accept generic parameters using auto, without needing to use std::function or manually template them.

auto adder = [](auto a, auto b) {
    return a + b;
};

std::cout << adder(1, 2) << "\n";      // 3
std::cout << adder(1.5, 2.5) << "\n";  // 4.0

This makes generic lambda code easier than ever.

✅ 2. `consteval` and `constinit`

consteval forces a function to be evaluated at compile-time.
constinit ensures a variable is initialized at compile time, but not necessarily constant.

consteval int square(int x) {
    return x * x;
}

constinit int cached = square(10);  // OK at compile-time

These keywords give you compile-time guarantees with more precision than constexpr alone.

✅ 3. Ranges Library

The <ranges> library is one of the biggest additions in C++20. It provides a pipeline-like syntax for working with collections.

#include <ranges>
#include <vector>
#include <iostream>

int main() {
    std::vector<int> v = {1, 2, 3, 4, 5};

    for (int i : v | std::ranges::views::filter([](int x) { return x % 2 == 0; })
                   | std::ranges::views::transform([](int x) { return x * x; })) {
        std::cout << i << " ";
    }
    // Output: 4 16
}

Think of it as LINQ for C++ — elegant, functional, and composable.

✅ 4. `std::span`

std::span is a non-owning view over a sequence of data (like arrays or vectors). It’s great for function parameters.

#include <span>

void print(std::span<int> data) {
    for (int x : data) std::cout << x << " ";
}

int main() {
    std::vector<int> v = {1, 2, 3};
    print(v);  // No copy needed
}

No more passing raw pointers and sizes separately!

✅ 5. `[[likely]]` and `[[unlikely]]`

You can now hint the compiler about the expected branch.

if ([[likely]] x == 0) {
    // Fast path
} else {
    // Rarely used path
}

While not mandatory, this helps the optimizer generate more efficient branch code.

✅ 6. `std::format`

Finally, type-safe string formatting arrives!

#include <format>
std::string message = std::format("Hello, {}!", "World");
std::cout << message;  // Hello, World!

This is a type-safe, fast, and readable alternative to sprintf or manual string concatenation.

✅ 7. Coroutines (For Advanced Users)

If you’ve ever used async or generator-style programming in other languages like Python or C#, C++20 now has native coroutine support.

#include <coroutine>
#include <iostream>

struct HelloTask {
    struct promise_type {
        HelloTask get_return_object() { return {}; }
        std::suspend_never initial_suspend() { return {}; }
        std::suspend_never final_suspend() noexcept { return {}; }
        void return_void() {}
        void unhandled_exception() {}
    };
};

HelloTask say_hello() {
    std::cout << "Hello from coroutine!\n";
}

int main() {
    say_hello();
}

Coroutines are low-level, but libraries like cppcoro or Boost.Coroutine build user-friendly abstractions on top.

Final Thoughts

If you haven’t explored C++20 yet, it’s worth diving in. Many of these features will improve your code’s clarity, performance, and safety without needing to drastically change your programming style.

Want to go deeper? Consider exploring:

concepts (compile-time constraints for templates)
modules (new way to structure code instead of headers)
three-way comparison (<=>) aka spaceship operator

✍️ Summary

C++20 brings modern programming ergonomics to C++:

✅ Cleaner lambdas

✅ Powerful compile-time tools

✅ Ranges and spans for safer, cleaner code

✅ Type-safe string formatting

✅ Native coroutine support

Let me know in the comments — what’s your favorite C++20 feature? Have you started using any of these in production?

Follow me for more practical C++ insights. Happy coding!

BEEP-8 SDK - Create 8-bit Fantasy Games in C++ | Retro Fantasy Console

Official Beep8 — Sat, 31 May 2025 10:02:29 +0000

Release native-level 60 fps applications without needing Apple approval
The BEEP-8 fantasy console features a 4 MHz ARM CPU and a low-resolution 128 × 240 GPU

Your browser does not support the video tag.

BEEP-8 SDK

BEEP-8 is a virtual retro game console designed for developing C/C++ applications. It runs on an emulated ARM v4 CPU at a fixed 4 MHz and is optimized for vertical smartphone displays. The SDK adopts a two-layer architecture: at the low level, developers can directly access hardware (H/W) through minimal APIs. At the high level, developers are free to choose their own structure, frameworks, or libraries to build applications. A PICO‑8–like C/C++ library is provided as one such option for rapid and familiar development, but it is entirely optional.

While the CPU is a 32-bit processor, the VDP (video display processor) and APU (audio processing unit) are modeled after simpler 8-bit–era virtual devices, striking a balance between modern programmability and nostalgic hardware constraints.

BEEP-8 runs smoothly at a guaranteed 60 fps on PC, smartphones (iPhone, Android), and tablet devices such as iPad, thanks to its browser-based design and rendering optimizations using WebGL and GPU shaders.

Even on iPhones, you can freely upload and share your self-made BEEP-8 apps with users around the world without going through Apple’s App Store review process, since the platform is entirely web-based.

All apps can be shared instantly via the official portal at https://beep8.org, making global distribution as simple as uploading a file.

It also allows developers to create 8-bit-style touch-enabled games, offering a retro experience combined with modern touch interaction—ideal for casual and mobile-friendly gameplay.

BEEP-8 System Block Diagram

Emulated CPU: ARM v4 running at a fixed 4 MHz.
- Based on an architecture originating in the mid-1990s.
- Compilable using GNU ARM GCC and supports C++20.
Memory: Main RAM is 1 MB and VRAM is 128 KB (shared for BG and sprite patterns, 4 bpp, 512×512).
ROM Limit: Maximum size is 1024 KB per game.
PPU (Pixel Processing Unit): Handles all rendering operations including background layers, sprites, and shape drawing.

– Drives the 128×240 pixel display using a fixed 16-color palette.

– Shares access to 128 KB of VRAM with both BG and sprite patterns (4 bpp, 512×512 layout).
APU (Audio Processing Unit): Emulates a Namco C30-style sound engine.

– Supports 8 audio channels with real-time synthesis.

– Provides retro-style sound effects and music playback.
HIF (Human Interface): Fully supports keyboard, mouse, and touch inputs via a dedicated HIF module.
– Converts browser input events into system-level signals.

– Ideal for both PC and mobile web environments.
TMR (Timer Module): Provides high-precision system timing for scheduling and interrupts.

– Drives periodic system tasks at a consistent 60 Hz tick rate.

– Integrated with the custom RTOS (b8OS) for real-time operations.
Custom RTOS (b8OS):
- A lightweight real-time operating system that supports multi-threading, semaphores, interrupt handlers, and a simple in-memory file system.
- Designed to provide a minimal set of UNIX-like APIs tailored for game development.
- In most cases, developers can ignore the presence of the OS entirely and focus purely on game logic.
- Enables asynchronous components, such as sound drivers operating independently from the main thread, to be implemented with ease.
- Its architecture allows developers to avoid complex OS-level implementation details while benefiting from real-time capabilities.
Development Environment:
- Advanced developers can directly control virtual hardware components (e.g., PPU, APU, I/O registers).
- Alternatively, a PICO-8-like C/C++ library is available for rapid development.
- All C/C++ source code is fully open and available for modification.
Distribution:
- Completed games are delivered as a single ROM file.
- Developers can release their games on the official BEEP‑8 portal site: https://beep8.org
- The portal serves as a shared space where everyone can upload, discover, and play games created by the community.
Cost:
- The SDK is completely free to use, and game releases are free as well.

Quick Start

Supported Platforms

The BEEP-8 SDK is cross-platform and supports the following environments:

Windows (Command Prompt / PowerShell)
- Provides two options: native Command Prompt and WSL2 (Windows Subsystem for Linux 2)
- While Command Prompt is supported, development in WSL2 is strongly recommended
macOS (Intel)
macOS (Apple Silicon / M1, M2, M3, etc.)
Linux (including WSL2 on Windows, which is treated as a Linux environment)

On most platforms, no external toolchain installation is required—the SDK includes prebuilt compilers for all supported platforms.

Download

You can get started with the SDK in one of the following ways:

✅ Option 1: Clone the Repository (Recommended) This is the most reliable and up-to-date method. If you are comfortable using Git, we strongly recommend cloning the repository:

  git clone https://github.com/beep8/beep8-sdk.git

This ensures you always get the latest version, and avoids security flags like Gatekeeper quarantine on macOS.

⚠️ Option 2: Download as a .tar.gz Archive (Alternative method) This method is provided for users who prefer not to use Git. You can download the latest snapshot of the source code here: https://github.com/beep8/beep8-sdk/archive/refs/heads/main.tar.gz

On macOS and Linux, the archive can be extracted with built-in tools.

💡 Important for macOS users: Files downloaded via a web browser may be quarantined by Gatekeeper, causing apps to be blocked.

To resolve this, after extracting the archive, run the following command in Terminal:

  xattr -r -d com.apple.quarantine <extracted-folder>

💡 On Windows, we recommend using 7-Zip to extract .tar.gz archives properly.

We strongly recommend using Option 1 (Git) unless you have a specific reason to avoid Git.

Directory Structure

The SDK repository is organized as follows:

├── README.md             # This file
├── doc/                  # Documentation
├── gnuarm/               # Prebuilt GNU ARM GCC toolchains for each supported platform
│   ├── Windows_NT/
│   ├── linux/
│   └── osx/
├── sdk/                  # Main SDK components
│   ├── app/              # Sample BEEP-8 applications and build targets
│   ├── b8helper/         # Optional utility libraries to assist BEEP-8 app development
│   └── b8lib/            # Core BEEP-8 SDK implementation
├── setenv.bat            # Windows script to add make to the system PATH
└── tool/                 # Development tools
    ├── busybox/          # BusyBox for UNIX-like command support on Windows
    ├── ccache/           # Compiler cache to speed up rebuilds
    ├── genb8rom/         # Tool for generating BEEP-8 ROM filesystem images
    ├── geninstcard/      # Tool for generating thumbnail images for BEEP-8 ROMs
    ├── make/             # Windows-compatible make.exe, path set via setenv.bat
    ├── png2c/            # Optional PNG-to-C array converter for asset embedding
    ├── relb8rom/         # Tool for packaging final release ROMs (required for distribution)
    └── scripts/          # Helper scripts for automating app development tasks

Build a Sample Application

sdk/                   # Main SDK components
└─ app/                # Sample BEEP-8 applications and build targets
   ├── hello/          # Hello world sample in BEEP-8
   ├── pico8_example/  # PICO-8–style library sample
   ├── bgprint/        # Prints text to the background layer
   ├── helper_nesctrl/ # NES-like controller sample displayed on-screen
   ├── ppu_example/    # Direct PPU control sample
   ├── touch/          # Touch panel status retrieval sample
   ├── Makefile        # Makefile for users who prefer make
   ├── build_all.sh    # Script to build all samples under this directory
   ├── makefile.app    # Shared Makefile include for make users
   ├── run_common.sh   # Build shell script for macOS/Linux users
   └── run_common.bat  # Build BAT for Windows/DOS prompt users

Each sample can be built, ROM-generated, and launched with a single script. No make is required unless you prefer it.

macOS / Linux (Bash)

Change into your sample’s directory (example: pico8_example):

   cd sdk/app/pico8_example

Run the build-and-launch script:

   ./run.sh

This will:

Compile all source files and graphics data
Generate the .b8 ROM file
Open the application in your default web browser

Left pane: the running game
Right pane: hidden debug console (your printf() output appears here)
If typing ./run.sh each time is tedious, add an alias in your shell config:

  alias r='./run.sh'

Each run gets a unique URL—you can paste it into any device’s browser to play remotely.

Windows (Command Prompt)

Open Command Prompt, then change into your sample’s directory:

   cd sdk\app\pico8_example

Run the build-and-launch script:

   run.bat

This will:

Compile all source files and graphics data
Generate the .b8 ROM file
Launch the application in your default web browser
- Left pane: the running game
- Right pane: hidden debug console (your printf() output appears here)
- To shortcut run.bat, define a DOS key macro:

  doskey r=run.bat $*

Each run gets a unique URL—you can paste it into any device’s browser to play remotely.

Advanced users (Make/CI): see MAKEFILE.md for full Make-based instructions.

Sample Application Directory Structure

pico8_example
├── run.sh                     # Build and upload script
├── data
│   ├── export
│   │   ├── sprite0.png.cpp   # Converted from sprite0.png to C++ source
│   │   └── sprite1.png.cpp   # Converted from sprite1.png to C++ source
│   └── import
│       ├── sprite0.png       # 128×128 sprite (4bpp), Bank #0
│       └── sprite1.png       # 128×128 sprite (4bpp), Bank #1
├── main.cpp                   # Application source code
└── romfs
    └── instcard.jpg           # Title image for distribution

Files in data/import/ (e.g. sprite0.png) are automatically converted by png2c into C++ source files under data/export/ (e.g. sprite0.png.cpp), each containing the image data as a C-style array for inclusion in the ROM.
./run.sh clean removes obj/ and data/export/ to restore the project to a clean state.
The romfs/instcard.jpg file serves as the title image in the distributed ROM.
Unlike PICO‑8, BEEP‑8 does not include built-in image editors; use your preferred graphics tool with the BEEP‑8 palette.

API Documentation

For complete API details, please refer to the header files in the sdk/b8lib/include/ directory. Key headers include:

Other headers: Provide low-level interfaces for the PPU, APU, and RTOS (b8OS).

API Reference BEEP-8 SDK

BEEP-8 SDK is the core system library required for developing BEEP-8 applications.

It provides direct access to the virtual hardware such as CPU, PPU, APU, timers, and the RTOS (b8OS).

All essential functions for bare-metal style development are defined here.

API Reference BEEP-8 HELPER LIB

BEEP-8 HELPER is an optional utility library that provides helpful modules to accelerate application development.

It includes utilities such as graphics helpers, math functions, and simple input managers that abstract away some of the hardware-level complexity.

API Reference PICO-8 LIKE LIB

This is a PICO-8–style compatibility library written in C/C++.

It mimics the original PICO-8 API as closely as possible while adapting it to C/C++ semantics.

The goal is to make the development experience familiar for PICO-8 users, while still leveraging the performance and flexibility of native code.

You can build full games using this library with minimal knowledge of the underlying hardware.

How to Release a BEEP-8 App

Share your game with players around the world on beep8.org!
To release your BEEP-8 app, see the instructions below:

https://github.com/beep8/beep8-sdk/blob/main/RELEASE.md

License

This project is licensed under the MIT License. See the LICENSE file for details.

Contact

Email: beep8.official@gmail.com
Website: https://beep8.org
Bluesky: @beep8-official.bsky.social
GitHub: beep8/beep8-sdk

Happy coding with BEEP-8!

DEV Community: Official Beep8

Build a Flappy Bird Clone in Under 300 Lines of C++ — and Run It on Your Phone!

Build a Flappy Bird Clone in Under 300 Lines of C++ — and Run It on Your Phone!

🎮 What is BEEP-8?

🐤 The Game: FlappyFlyer

🧠 Game Architecture

📦 Sprites and Tilemap

🧱 Procedural Pipe Generation

🏃 Physics & Input

☠️ Collision & Game Over

🏁 Title Screen and Score

📕 Here’s the full source code for the app!

📦 Source Code

🚀 Conclusion

Getting Started with C++20 Ranges: Write Cleaner and Safer Loops

Getting Started with C++20 Ranges: Write Cleaner and Safer Loops

✅ What Are Ranges?

✅ Basic Setup

✅ Practical Example: Filtering Even Numbers

✅ Transforming Values: Square Each Number

✅ Combining Views: Filter and Then Transform

✅ Taking and Dropping Elements

✅ Converting Views to Containers

✅ Why Should You Use Ranges?

⚠️ Gotchas

Final Thoughts

✍️ Summary

What’s New in C++20: A Practical Guide for Everyday C++ Developers

What’s New in C++20: A Practical Guide for Everyday C++ Developers

✅ 1. auto with Lambdas (Template Lambdas)

✅ 2. consteval and constinit

✅ 3. Ranges Library

✅ 4. std::span

✅ 5. [[likely]] and [[unlikely]]

✅ 6. std::format

✅ 7. Coroutines (For Advanced Users)

Final Thoughts

✍️ Summary

BEEP-8 SDK - Create 8-bit Fantasy Games in C++ | Retro Fantasy Console

BEEP-8 SDK

BEEP-8 System Block Diagram

Quick Start

Supported Platforms

Download

Directory Structure

Build a Sample Application

macOS / Linux (Bash)

Windows (Command Prompt)

Sample Application Directory Structure

API Documentation

How to Release a BEEP-8 App

License

Contact

✅ 1. `auto` with Lambdas (Template Lambdas)

✅ 2. `consteval` and `constinit`

✅ 4. `std::span`

✅ 5. `[[likely]]` and `[[unlikely]]`

✅ 6. `std::format`