Skip to main content

Platformer Level Creator

This sample allows a user to create a playable 2D platformer game level by dragging obstacle and item Nodes in from a Palette. It has a default edit mode, in which the user can pan around the Diagram as much as desired with Diagram.scrollMode set to ScrollMode.Infinite, and a play mode, in which a character Part is rendered at the center of the viewport and can be controlled with W/A/D or the arrow keys. Created levels can then be saved and loaded from JSON. The game logic uses GraphObject.actualBounds and Rect.intersectRect to handle collisions.

Ground and platform nodes can be traversed by the character, and the moving platform oscillates back and forth. The spike and enemy nodes are hazards, and player collisions with them will cause a restart. Spikes are static and enemy nodes oscillate back and forth across their walkable area. Springs cause the character to bounce up and down, coins are collectibles, and touching the goal flag ends the level and returns to edit mode. Press the Play button below to see the level demonstrated in action.

GoJS Features in this sample

Palette

A Palette is a subclass of Diagram that is used to display a number of Parts that can be dragged into the diagram that is being modified by the user. The initialization of a Palette is just like the initialization of any Diagram. Like Diagrams, you can have more than one Palette on the page at the same time.

More information can be found in the GoJS learn pages.

Related samples