Last active
November 23, 2025 23:08
-
-
Save joshnuss/6302d4f4ffcded371607abd5ffc63c44 to your computer and use it in GitHub Desktop.
Debug view for Rapier2D engine with Svelte
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- | |
| Usage: | |
| <Debug bind:this={debug} {world} width=800 height=600 scale=10 /> | |
| Then during game loop call: | |
| debug.render() | |
| --> | |
| <script lang="ts"> | |
| import { onMount } from 'svelte' | |
| import { Application, Graphics, Color } from 'pixi.js' | |
| import { Viewport } from "pixi-viewport" | |
| import { World } from "@dimforge/rapier2d" | |
| type Props = { | |
| world: World | |
| scale?: number | |
| width: number, | |
| height: number | |
| } | |
| let { world, width, height, scale = 1 }: Props = $props() | |
| let wrapper: HTMLElement | |
| let lines = new Graphics() | |
| onMount(async() => { | |
| const app = new Application() | |
| await app.init({ background: 'white' }) | |
| wrapper.appendChild(app.canvas); | |
| const viewport = new Viewport({ | |
| screenWidth: window.innerWidth, | |
| screenHeight: window.innerHeight, | |
| worldWidth: width, | |
| worldHeight: height, | |
| events: app.renderer.events, | |
| }) | |
| app.stage.addChild(viewport) | |
| app.stage.scale.x = scale | |
| app.stage.scale.y = scale | |
| viewport.addChild(lines) | |
| render() | |
| }) | |
| export function render() { | |
| const { vertices, colors } = world.debugRender() | |
| lines.clear() | |
| for (let i = 0; i < vertices.length / 4; i += 1) { | |
| const color = new Color({ | |
| r: colors[i * 8], | |
| g: colors[i * 8 + 1], | |
| b: colors[i * 8 + 2], | |
| }) | |
| lines | |
| .moveTo(vertices[i * 4], -vertices[i * 4 + 1]) | |
| .lineTo(vertices[i * 4 + 2], -vertices[i * 4 + 3]) | |
| .stroke({ width: 0.1, color }) | |
| } | |
| } | |
| </script> | |
| <div bind:this={wrapper}/> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment