[examples] split screen for 2D camera

[gabrielssanches]

I see that there is a 3D splitscreen example (examples/core/core_split_screen.c)

Is there an example for a 2D split screen?

[ghost]

@gabrielssanches I don't think there's one yet, but I went ahead and modified the Split Screen example (examples/core/core_split_screen.c) to roughly adapt it to 2D Cameras:

// Modified the Split Screen example (https://github.com/raysan5/raylib/blob/master/examples/core/core_split_screen.c)
// to roughly adapt it to 2D Cameras.

/*******************************************************************************************
*
*   raylib [core] example - split screen
*
*   Example originally created with raylib 3.7, last time updated with raylib 4.0
*
*   Example contributed by Jeffery Myers (@JeffM2501) and reviewed by Ramon Santamaria (@raysan5)
*
*   Example licensed under an unmodified zlib/libpng license, which is an OSI-certified,
*   BSD-like license that allows static linking with closed source software
*
*   Copyright (c) 2021-2023 Jeffery Myers (@JeffM2501)
*
********************************************************************************************/

#include "raylib.h"

//------------------------------------------------------------------------------------
// Program main entry point
//------------------------------------------------------------------------------------
int main(void)
{
    // Initialization
    //--------------------------------------------------------------------------------------
    const int screenWidth = 800;
    const int screenHeight = 450;

    InitWindow(screenWidth, screenHeight, "raylib [core] example - split screen");

    Rectangle player1 = { 200, 200, 40, 40 };
    Rectangle player2 = { 250, 200, 40, 40 };

    Camera2D camera1 = { 0 };
    camera1.target = (Vector2){ player1.x, player1.y };
    camera1.offset = (Vector2){ 200.0f, 200.0f };
    camera1.rotation = 0.0f;
    camera1.zoom = 1.0f;

    Camera2D camera2 = { 0 };
    camera2.target = (Vector2){ player2.x, player2.y };
    camera2.offset = (Vector2){ 200.0f, 200.0f };
    camera2.rotation = 0.0f;
    camera2.zoom = 1.0f;

    RenderTexture screenCamera1 = LoadRenderTexture(screenWidth / 2, screenHeight);
    RenderTexture screenCamera2 = LoadRenderTexture(screenWidth / 2, screenHeight);

    // Build a flipped rectangle the size of the split view to use for drawing later
    Rectangle splitScreenRect = { 0.0f, 0.0f, (float)screenCamera1.texture.width, (float)-screenCamera1.texture.height };

    SetTargetFPS(60);               // Set our game to run at 60 frames-per-second
    //--------------------------------------------------------------------------------------

    // Main game loop
    while (!WindowShouldClose())    // Detect window close button or ESC key
    {
        // Update
        //----------------------------------------------------------------------------------
        if (IsKeyDown(KEY_S)) player1.y += 3;
        else if (IsKeyDown(KEY_W)) player1.y -= 3;

        if (IsKeyDown(KEY_RIGHT)) player2.x += 3;
        else if (IsKeyDown(KEY_LEFT)) player2.x -= 3;

        // Draw
        //----------------------------------------------------------------------------------
        BeginTextureMode(screenCamera1);
            ClearBackground(RAYWHITE);
            BeginMode2D(camera1);
                DrawRectangleRec(player1, RED);
                DrawRectangleRec(player2, BLUE);
            EndMode2D();
            DrawText("PLAYER1 W/S to move", 10, 10, 20, RED);
        EndTextureMode();

        BeginTextureMode(screenCamera2);
            ClearBackground(RAYWHITE);
            BeginMode2D(camera2);
                DrawRectangleRec(player1, RED);
                DrawRectangleRec(player2, BLUE);
            EndMode2D();
            DrawText("PLAYER2 LEFT/RIGHT to move", 10, 10, 20, BLUE);
        EndTextureMode();

        // Draw both views render textures to the screen side by side
        BeginDrawing();
            ClearBackground(BLACK);
            DrawTextureRec(screenCamera1.texture, splitScreenRect, (Vector2){ 0, 0 }, WHITE);
            DrawTextureRec(screenCamera2.texture, splitScreenRect, (Vector2){ screenWidth/2.0f, 0 }, WHITE);
        EndDrawing();
    }

    // De-Initialization
    //--------------------------------------------------------------------------------------
    UnloadRenderTexture(screenCamera1); // Unload render texture
    UnloadRenderTexture(screenCamera2); // Unload render texture

    CloseWindow();                      // Close window and OpenGL context
    //--------------------------------------------------------------------------------------

    return 0;
}

Screenshot

Adapted this in about 15min, so it probably needs some polishing. But should give you an idea of the process.

Edit: updated the player2 instructions.

[raysan5]

@gabrielssanches Feel free to send this new example if you want.

[gabrielssanches]

Thanks @raysan5 for the example code, I've added camera tracking to the players and a grid for the visuals