Codex Gameplay Video Creator

Inspiration

I am building a pixel-art browser game called Hero's Bounty, and I wanted a better way to show the game online. A raw gameplay recording did not feel polished enough for YouTube Shorts, so I built a small Remotion project that turns real gameplay into a finished social video.

The inspiration was to treat video editing like code: capture gameplay once, compose it with React, tune the timing, and render a repeatable YouTube Short.

What it does

Codex Gameplay Video Creator is a Remotion-based video pipeline for creating a YouTube Short from Hero's Bounty gameplay.

It takes a captured gameplay clip and turns it into a polished vertical video with timed comic-style text, impact callouts, slowed-down aiming moments, a 9:16 YouTube Shorts layout, and a rendered MP4 output.

The submitted project is the coded video composition system, not the full game.

How we built it

I built it with Remotion, React, TypeScript, and Vite. The gameplay footage comes from Hero's Bounty, then Remotion handles the layout, timing, overlays, and final render.

Codex helped me iterate on the project as a coding partner. We adjusted the Remotion components, synced the comic text with cannon impacts, fixed timing issues, regenerated the gameplay capture, rendered the final MP4, created a GIF preview, updated the README, and packaged the project into a standalone GitHub repo.

The workflow is:

1. Capture gameplay from Hero's Bounty
2. Load the footage into a Remotion composition
3. Add text, timing, effects, and layout in React
4. Preview the composition locally
5. Render the final MP4
6. Use the rendered video for YouTube and the buildathon submission

Challenges we ran into

The hardest part was syncing the text and comic effects with the actual gameplay. The cannon shots and bounces did not always line up cleanly, so the first versions had callouts that felt delayed or disconnected.

I solved this by making the demo capture more consistent, remeasuring the timing frame by frame, and updating the Remotion composition so the text appears at the right moments.

Another challenge was keeping the Remotion submission separate from the main game repo while still using updated gameplay footage from the game.

Accomplishments that we're proud of

I am proud that the final project is not just a video file. It is a repeatable video-making workflow. The same structure can be reused for future Hero's Bounty shorts, trailers, and update videos.

I am also proud that the final output is already published as a real YouTube Short, not only a local demo.

What we learned

I learned that Remotion is a strong tool for game marketing because the video can be treated like code. Instead of manually editing everything in a timeline, I can make reusable video components and quickly re-render new versions.

I also learned how useful Codex can be for creative engineering work. It helped with code, timing, debugging, rendering, repo setup, README updates, and packaging the final submission.

What's next for Codex Gameplay Video Creator

Next I want to keep using this pipeline to make more short-form videos for Hero's Bounty. I also want to add more reusable templates, such as before-and-after showcases, patch update clips, and feature announcement videos.

The longer-term goal is to use these videos to support the public release of a playable Hero's Bounty demo.

Built With

• codex
• javascript
• phaser.js