Intro

You built it. You branded it. You made a trailer for it. Now it's time to ship it.

Shipping means publishing your game live on the internet so anyone can play it from any browser, on any device, anytime. For you, that means:

• Exporting from GDevelop: Convert your game project into a playable HTML5 web build
• Adding to your portfolio: Create a project page on your username.github.io site with screenshots, description, trailer, and a playable embed
• Publishing to GitHub: Push your files live and test the URL
• Sharing the link: Post it to Teams so your team can celebrate

Your game is now live. Forever. Congrats.

Before You Start

You need:

• Your finished GDevelop project from Lesson 3.3 (the playable game)
• Access to your username.github.io GitHub Pages site (from Unit 2, Lesson 2.4)
• Your poster and trailer from Lessons 3.4 & 3.5
• A 2–3 sentence description of your game (tone, what players do, why it's cool)
• 2–3 screenshots from your game (gameplay moments, story scenes, UI)
• Basic HTML knowledge (from Unit 2)

Keep in mind: Once you push to GitHub, your game is public. Test it thoroughly before shipping.

Task 1: Export from GDevelop 🟢

Goal: Turn your GDevelop project into a playable web build (HTML/CSS/JavaScript).

Duration: 30 minutes–1 hour

1. Open your finished game in GDevelop. Make sure it plays correctly in preview mode. If there are crashes or obvious bugs, fix them first. You're about to ship this.
2. Test the game one final time.
   • Play through start to finish
   • Try edge cases (jump in weird spots, click buttons multiple times, etc.)
   • Check that all scenes load and transitions work
   • Verify that the HUD, art, and audio all work

   If you find issues, fix them and test again. A buggy shipped game is worse than a late game.

3. Prepare for export. In GDevelop:
   • Open the menu: File → Build → Build a web version (or similar; the exact path varies by GDevelop version)
   • Choose your project (should be selected already)
   • Select "Web (HTML5)" as the build target
4. Configure export settings.
   • Project name: Something simple, no spaces. Example: tower_escape or mystery_museum
   • Output format: Choose "ZIP file" (you'll extract it later and upload to GitHub)
   • Optimize for size: Check this box to reduce file size (speeds up loading)
5. Build and download.
   • Click "Build"
   • GDevelop will generate your web build and offer a download (ZIP file)
   • Save it to your desktop or a project folder (e.g., H:\ICT 9\3_dev_team\exports\)
6. Extract and test locally.
   • Right-click the ZIP file → "Extract All"
   • Open the extracted folder and find index.html
   • Double-click index.html to open it in your browser (or drag it into Chrome)
   • Play the game. Does it work exactly like the preview in GDevelop?

   Common issue: The game doesn't load or runs slowly. Try: (1) wait 5–10 seconds for assets to load, (2) check your browser's console for errors (F12 → Console tab), (3) try a different browser.

7. Organize the files. You should have a folder structure like:
   tower_escape/
   ├── index.html
   ├── game.js
   ├── assets/
   │ ├── images/
   │ └── audio/
   └── (other GDevelop-generated files)
   

   🟢 Your game is playable as a web build locally. Ready to upload to GitHub.

Checkpoint: Game exports as HTML5. Plays correctly when opened locally in a browser.

Task 2: Create a Project Page 🟢

Goal: Build an HTML page on your portfolio that showcases your game with a description, screenshots, trailer, and a playable embed.

Duration: 1–2 class periods

1. Plan your page structure. Your project page should include (from top to bottom):
   • Hero section: Game title, your name(s), and one striking screenshot or poster image
   • Description: 2–3 sentences: what's the game about, what does the player do, what makes it cool?
   • Team credits: Names and roles of everyone who worked on it (Designer, Programmer, Artist, Sound, Marketing)
   • Gameplay screenshots: 3–5 images showing different moments (intro, action, UI, story, victory)
   • Embedded trailer: Your 30–60 second video from Lesson 3.5, playable right on the page
   • Game embed: The playable game itself in an iframe, so visitors can try it without leaving the page
   • Download link: A link to download the full game as a ZIP (optional, but nice for sharing)
   • Back to portfolio: A link back to your main portfolio page
2. Create the HTML file. In your username.github.io repo, create a new folder and file:
   username.github.io/
   └── projects/
   └── tower_escape/
   └── index.html
3. Write the project page HTML. Here's a template to start:
   <!DOCTYPE html>
   <html>
   <head>
     <title>Tower Escape - Game Project</title>
     <style>
       body { font-family: Arial, sans-serif; margin: 0; padding: 20px; background: #f0f0f0; }
       .container { max-width: 900px; margin: 0 auto; background: white; padding: 30px; border-radius: 8px; }
       h1 { color: #333; margin-top: 0; }
       img { max-width: 100%; height: auto; border-radius: 4px; }
       .game-embed { width: 100%; height: 600px; border: 1px solid #ccc; border-radius: 4px; margin: 20px 0; }
     </style>
   </head>
   <body>
     <div class="container">
       <h1>Tower Escape</h1>
       <p><strong>By: Team Alpha</strong></p>
       <img src="hero.jpg" alt="Tower Escape screenshot">
       <h2>About</h2>
       <p>A fast-paced platformer where you race against time to reach the top of a crumbling tower. Jump, dodge, and stomp your way past obstacles and enemies. Can you escape before the tower falls?</p>
       <h2>Team Credits</h2>
       <ul>
       <li>Creative Director: Alex</li>
       <li>Programmer: Jordan</li>
       <li>Artist: Sam</li>
       </ul>
       <h2>Gameplay</h2>
       <img src="screenshot1.jpg" alt="Gameplay">
       <img src="screenshot2.jpg" alt="Boss fight">
       <h2>Trailer</h2>
       <iframe width="100%" height="400" src="https://www.youtube.com/embed/VIDEO_ID" title="Tower Escape Trailer"></iframe>
       <h2>Play Now</h2>
       <iframe class="game-embed" src="./tower_escape/" title="Tower Escape Game"></iframe>
       <p><a href="https://github.com/username/tower_escape/archive/main.zip" download>Download Game (ZIP)</a></p>
       <p><a href="../">← Back to Portfolio</a></p>
     </div>
   </body>
   </html>
4. Customize the page. Replace placeholder text:
   • Your game's title, description, team names, and roles
   • Image file names (you'll add these next)
   • Trailer embed (if hosted on YouTube, use the embed link; if local, use <video> tag)
   • Use your Brand Kit colors and fonts if desired (add CSS)
5. Add images to your project folder. In the same folder as index.html, add:
   • hero.jpg — Your poster or a striking screenshot
   • screenshot1.jpg, screenshot2.jpg, etc. — 3–5 gameplay images

   Keep images at 1920×1080 or smaller (to avoid huge file sizes). Compress using a tool like TinyJPG.

6. Upload the trailer video (if not on YouTube).
   • If your trailer is on YouTube, just embed the link (simpler)
   • If it's local, copy the .mp4 file to your project folder and embed with: <video width="100%" controls><source src="trailer.mp4" type="video/mp4"></video>
7. Test locally. On your computer, open the index.html file in a browser. Check:
   • All images load correctly
   • The game embed loads (it will show the game in an iframe)
   • The trailer plays
   • All links work

   🟢 Project page is complete and tested locally.

Checkpoint: Project page is written, images added, and playable locally.

Task 3: Publish to GitHub & Test 🟢

Goal: Push your files to GitHub and verify the game is playable on a live URL.

Duration: 1–2 class periods

1. Add files to your GitHub repo. Using GitHub Desktop or the command line:
   • Copy your project folder (with index.html, images, game files) into your username.github.io local repo
   • Example folder structure:
     username.github.io/
     ├── index.html (your main portfolio page)
     ├── about.html
     ├── projects/
     │ └── tower_escape/
     │ ├── index.html (project page)
     │ ├── hero.jpg
     │ ├── screenshots/
     │ └── game/ (or tower_escape/) — the GDevelop export folder
     
2. Commit to GitHub. In GitHub Desktop or terminal:
   • Add a commit message like Ship: Add Tower Escape game project page
   • Commit to your main branch
   • Push to origin (GitHub)
3. Wait for GitHub Pages to build.
   • GitHub automatically rebuilds your site when you push changes (takes 30 seconds–2 minutes)
   • Go to your GitHub repo → Settings → Pages and check the status: "Your site is live at https://username.github.io"
4. Test the live URLs.
   • Open https://username.github.io/projects/tower_escape/ in your browser
   • Check:
     • ✓ Project page loads and looks good
     • ✓ Images display correctly
     • ✓ Trailer plays (or embeds)
     • ✓ Game iframe loads (may take a few seconds)
     • ✓ Game is playable (click into it and test controls)
     • ✓ All links work
5. Test on a different device. This is your final checkpoint:
   • Open your live URL on a phone, tablet, or a different computer
   • Play the game all the way through (or at least confirm it loads and responds to input)
   • If it works, you're golden. If not, check:
     • Browser compatibility (try Chrome, Firefox, Safari)
     • Network issues (is the site loading, or is it timing out?)
     • File paths (are images and game files loading, or 404 errors?)
6. Share the URL. Post in your team's Teams channel:
   • Your live game URL: https://username.github.io/projects/tower_escape/
   • A screenshot or 1-sentence celebration ("Live! Play my game!")
   • Any caveats ("best on Chrome," "might lag on older devices," etc.)

   🟢 Game is live and playable on a different computer. Ship complete.

7. Add to the main portfolio. Update your main portfolio page (username.github.io/index.html or a projects page) to include a link/card for your new game. Example:
   <a href="/projects/tower_escape/">
     <h3>Tower Escape</h3>
     <img src="/projects/tower_escape/hero.jpg" alt="Game poster">
     <p>A platformer where you race the clock to escape a crumbling tower.</p>
   </a>

Checkpoint: Game is live at your public URL. Playable from another device. Added to your portfolio.

Blue Tasks: Deeper Learning

• SEO & sharing optimization. Add metadata to your project page: Open Graph tags for the title, description, and thumbnail image. When someone shares the link on social media, a preview card appears with your poster and title.
• Accessibility audit. Run your project page through an accessibility tool (WAVE, Lighthouse). Fix any contrast issues, add alt text to all images, and ensure keyboard navigation works.
• Responsive design. Make your project page mobile-friendly using CSS media queries. Test on a phone. Images should scale, text should remain readable, and the game embed should adjust.
• Analytics. Add a simple counter (or use Google Analytics) to see how many visitors and plays your game gets. Celebrate the milestones.

Reflection

• From pitching the idea (Lesson 3.1) to shipping the game (3.6), what was the biggest challenge? How did you overcome it?
• If you had to add one more feature to your game after shipping, what would it be? Why?
• Imagine a player you don't know plays your game. What do you hope they experience (fun, challenge, story, creativity, joy)?
• What's next for this game? Will you keep building, move to a new project, or ship it as-is?

Hand It In

Submit to Teams under "Lesson 3.6 — Ship It."

• Live URL — The playable game page (https://username.github.io/projects/...)
• Screenshot of the live page — Showing the project page with images, trailer, and game embed
• Test report — Play the game on a different device and note: "Tested on [device/browser], game loads [yes/no], playable [yes/no], any issues encountered"
• Link to your GitHub repo — So your team can see the source
• Your reflection — (the four prompts answered)