{"id":24014964,"url":"https://github.com/alessthedev/canvas-engine-demo","last_synced_at":"2025-04-15T11:44:26.318Z","repository":{"id":212336008,"uuid":"729637256","full_name":"AlessTheDev/canvas-engine-demo","owner":"AlessTheDev","description":"This is a small engine I made to create interactive websites with canvas with decent performance","archived":false,"fork":false,"pushed_at":"2024-01-30T14:52:47.000Z","size":586,"stargazers_count":6,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-28T19:38:57.042Z","etag":null,"topics":["canvas","canvas2d","engine"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AlessTheDev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-12-09T21:23:40.000Z","updated_at":"2024-02-21T11:43:51.000Z","dependencies_parsed_at":"2024-01-30T16:04:46.006Z","dependency_job_id":"d1716374-8ff1-427e-a668-86001f317c1d","html_url":"https://github.com/AlessTheDev/canvas-engine-demo","commit_stats":null,"previous_names":["alessthedev/canvas-engine-demo"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlessTheDev%2Fcanvas-engine-demo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlessTheDev%2Fcanvas-engine-demo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlessTheDev%2Fcanvas-engine-demo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlessTheDev%2Fcanvas-engine-demo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AlessTheDev","download_url":"https://codeload.github.com/AlessTheDev/canvas-engine-demo/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249064546,"owners_count":21207112,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["canvas","canvas2d","engine"],"created_at":"2025-01-08T07:38:21.684Z","updated_at":"2025-04-15T11:44:26.293Z","avatar_url":"https://github.com/AlessTheDev.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Canvas Engine\n![Canvas engine](https://repository-images.githubusercontent.com/729637256/47d7f992-6fe0-45ca-968a-bb49dd246bc7)\n## What's this?\n\nInitially designed as a header for a website, this project evolved into a small engine for those who prefer full control without relying on special libraries. The result is a customizable engine that performs well.\n\n## How to Try the Demo\n\n1. Clone the repository.\n2. Open the cloned folder in a terminal and run `npm install`.\n3. Execute `npm run dev` and open the provided link.\n\n\u003e If you encounter any issues, ensure that TypeScript is installed.\n\n## Can I Use it for a Personal Project?\n\nAbsolutely! Download the source code or fork the project. Inside the \"engine\" folder, you'll find the main engine classes. The \"objects\" folder contains files used in the demo. Describe your scenes' behavior in the main file.\n\n## Tutorial\n\u003e WARINING: This tutorial is for version 1.0, one will come for version 2.0\n\n### Scene Manager\n\nTo use the engine, let's start by creating a SceneManager in the `main.ts` file:\n\n```tsx\nconst sceneManager = new SceneManager();\n```\n\nThis automatically displays a DefaultScene.\n\n![DefaultScene](https://github.com/AlessTheDev/canvas-engine-demo/assets/96922088/3a7ceb13-102f-4dfb-94cd-06ad181c8b7d)\n\n### Create a Scene\n\nCreate a new Scene:\n\n```ts\nconst scene = new Scene(0, 0, sceneInit, true);\n```\n\nThe boolean value sets the flex property to automatically resize the canvas based on the parent element of the `\u003ccanvas\u003e` HTML tag.\n\n\u003e To set a scene with predefined width and height, use: new Scene(w, h, initFn).\n\u003e \n\nNow, let's explore the `sceneInit` function to add objects to the scene.\n\n### Add an Object to a Scene\n\nAdd a background to the scene:\n\n```ts\nfunction sceneInit() {\n    // Background\n    const background = new Background(\"/background.png\", true);\n    scene.add(background);\n}\n```\n\n### Display a Scene\n\nAssign the scene to the scene manager:\n\n```ts\nsceneManager.assignScene(scene);\n```\n\nNow you should see this:\n![BackgroundScene](https://github.com/AlessTheDev/canvas-engine-demo/assets/96922088/6ba1a2e4-2dc0-42ed-931d-acffbdafe254)\n\n### Create GameObjects\n\nCreating your GameObjects is essential. For instance, let's create a circle object:\n\n```ts\nexport default class Circle extends GameObject {\n    constructor(spawnX: number, spawnY: number, radius: number) {\n        super(spawnX, spawnY, radius, radius);\n    }\n\n    draw(scene: Scene): void {\n        const c = scene.context;\n        c.beginPath();\n        c.arc(this.x, this.y, this.width, 0, Math.PI * 2, false);\n        c.fillStyle = \"white\";\n        c.fill();\n        c.closePath();\n    }\n\n    private n: number = 0;\n\n    update(scene: Scene): void {\n        this.y += Math.sin(this.n) * 5;\n        this.n += 0.05;\n    }\n}\n```\n\nIf we add the circle to the scene we should be able to see it!\n\n![CircleInTheCanvas](https://github.com/AlessTheDev/canvas-engine-demo/assets/96922088/a882c354-06ea-488b-8dfd-751d37e247ac)\n\n### Components\n\nComponents are stored in an array in the GameObject class. Here's an example of the CenterObjectComponent:\n\n```ts\nexport default class CenterObjectComponent extends Component\u003cGameObject\u003e {\n    update(object: GameObject): void {\n        const scene = SceneManager.instance.activeScene;\n        object.x = scene.getCanvasWidth() / 2 - (object.width / 2);\n        object.y = scene.getCanvasHeight() / 2 - (object.height / 2);\n    }\n}\n```\n\nTo add a component to your object, use the `useComponent` method:\n\n```ts\nconst text = new SimpleText(10, 50, \"My Text\");\ntext.useComponent(new CenterObjectComponent());\n```\n\nKeep in mind that the component's update methods get called after the object's update method:\n\n```ts\n// Update scene objects\nthis.objects.forEach((object: GameObject) =\u003e {\n    object.update(this);\n    object.runComponents();\n    object.draw(this);\n})\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falessthedev%2Fcanvas-engine-demo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falessthedev%2Fcanvas-engine-demo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falessthedev%2Fcanvas-engine-demo/lists"}