play-cljs.core

:animation

Example

Draws its children in a continuous loop. :duration - The number of milliseconds each child should be displayed (number)
[:animation {:x 10, :y 10, :duration 200} [:image {:name "player_walk1.png", :width 80, :height 80}] [:image {:name "player_walk2.png", :width 80, :height 80}] [:image {:name "player_walk3.png", :width 80, :height 80}]]

:arc

Example

Draws an arc to the screen. :width - The width of the arc (number) :height - The height of the arc (number) :start - Angle to start the arc, in radians (number) :stop - Angle to stop the arc, in radians (number)
[:arc {:x 200, :y 0, :width 200, :height 200, :start 0, :stop 3.14}]

:bezier

Example

Draws a cubic Bezier curve on the screen. :x1 - The x-coordinate of the first anchor point (number) :y1 - The y-coordinate of the first anchor point (number) :x2 - The x-coordinate of the first control point (number) :y2 - The y-coordinate of the first control point (number) :x3 - The x-coordinate of the second control point (number) :y3 - The y-coordinate of the second control point (number) :x4 - The x-coordinate of the second anchor point (number) :y4 - The y-coordinate of the second anchor point (number) :z1 - The z-coordinate of the first anchor point (number) :z2 - The z-coordinate of the first control point (number) :z3 - The z-coordinate of the second anchor point (number) :z4 - The z-coordinate of the second control point (number)
[:stroke {:colors [0 0 0]} [:bezier {:x1 85, :y1 20, :x2 10, :y2 10, :x3 90, :y3 90, :x4 15, :y4 80}]]

:box

Example

[3D] Draws a box. NOTE: You must pass {:mode :webgl} to the third argument of create-game. :width - The width of the box (number) :height - The height of the box (number) :depth - The depth of the box (number) :detail-x - Triangle subdivisions in the x-dimension (number) :detail-y - Triangle subdivisions in the y-dimension (number)
[:rotate {:angle (/ (js/window.performance.now) 1000), :axis :x} [:rotate {:angle (/ (js/window.performance.now) 1000), :axis :y} [:box {:width 50, :height 50, :depth 50}]]]

:cone

Example

[3D] Draws a cone. NOTE: You must pass {:mode :webgl} to the third argument of create-game. :radius - The radius of the cone (number) :height - The height of the cone (number) :detail-x - Number of segments in the x-dimension (number) :detail-y - Number of segments in the y-dimension (number) :cap? - Whether to draw the base of the cone (boolean)
[:rotate {:angle (/ (js/window.performance.now) 1000), :axis :x} [:rotate {:angle (/ (js/window.performance.now) 1000), :axis :y} [:cone {:radius 50, :height 100}]]]

:contour

Example

Draws a negative shape. :points - The x and y vertexes to draw (vector of numbers)
[:shape {:points [40 40 80 40 80 80 40 80]} [:contour {:points [20 20 20 40 40 40 40 20]}]]

:curve

Example

Draws a curved line on the screen between two points, given as the middle four parameters. :x1 - The x-coordinate of the beginning control point (number) :y1 - The y-coordinate of the beginning control point (number) :x2 - The x-coordinate of the first point (number) :y2 - The y-coordinate of the first point (number) :x3 - The x-coordinate of the second point (number) :y3 - The y-coordinate of the second point (number) :x4 - The x-coordinate of the ending control point (number) :y4 - The y-coordinate of the ending control point (number) :z1 - The z-coordinate of the beginning control point (number) :z2 - The z-coordinate of the first point (number) :z3 - The z-coordinate of the second point (number) :z4 - The z-coordinate of the ending control point (number)
[:stroke {:colors [255 102 0]} [:curve {:x1 5, :y1 26, :x2 5, :y2 26, :x3 73, :y3 24, :x4 73, :y4 180}]]

:cylinder

Example

[3D] Draws a cylinder. NOTE: You must pass {:mode :webgl} to the third argument of create-game. :radius - The radius of the cylinder (number) :height - The height of the cylinder (number) :detail-x - Number of segments in the x-dimension (number) :detail-y - Number of segments in the y-dimension (number) :bottom-cap? - Whether to draw the bottom of the cylinder (boolean) :top-cap? - Whether to draw the top of the cylinder (boolean)
[:rotate {:angle (/ (js/window.performance.now) 1000), :axis :x} [:rotate {:angle (/ (js/window.performance.now) 1000), :axis :y} [:cylinder {:radius 50, :height 100}]]]

:div

Example

Acts as a generic container of options that it passes down to its children. The `x` and `y` are special in this example, serving as the pointer's position. Notice that the :rect is hard-coded at (0,0) but the :div is passing its own position down.
[:div {:x x, :y y} [:fill {:color "lightblue"} [:rect {:x 0, :y 0, :width 100, :height 100}]]]

:ellipse

Example

Draws an ellipse (oval) to the screen. :width - The width of the ellipse (number) :height - The height of the ellipse (number)
[:ellipse {:x 100, :y 100, :width 50, :height 70}]

:ellipsoid

Example

[3D] Draws an ellipsoid. NOTE: You must pass {:mode :webgl} to the third argument of create-game. :radius - The radius of the ellipsoid (number) :height - The height of the ellipsoid (number) :detail-x - Number of segments in the x-dimension (number) :detail-y - Number of segments in the y-dimension (number)
[:rotate {:angle (/ (js/window.performance.now) 1000), :axis :x} [:rotate {:angle (/ (js/window.performance.now) 1000), :axis :y} [:ellipsoid {:radius-x 20, :radius-y 30, :radius-z 40}]]]

:fill

Example

Sets the color of the children. :color - The name of the color (string) :colors - The RGB or HSB color values (vector of numbers)
[:fill {:color "purple"} [:rect {:x 40, :y 40, :width 150, :height 150}]]

:hsb

Example

Causes the color values in all children to be interpreted as HSB colors. :max-h - Range for hue (number between 0 and 360) :max-s - Range for saturation (number between 0 and 100) :max-b - Range for brightness (number between 0 and 100) :max-a - Range for alpha (number between 0 and 255)
[:hsb {:max-h 90, :max-s 50, :max-b 100} [:fill {:colors [20 50 70]} [:rect {:x 10, :y 10, :width 70, :height 70}]]]

:hsl

Example

Causes the color values in all children to be interpreted as HSL colors. :max-h - Range for hue (number between 0 and 360) :max-s - Range for saturation (number between 0 and 100) :max-l - Range for lightness (number between 0 and 100) :max-a - Range for alpha (number between 0 and 255)
[:hsl {:max-h 90, :max-s 50, :max-l 100} [:fill {:colors [20 50 70]} [:rect {:x 10, :y 10, :width 70, :height 70}]]]

:image

Example

Displays an image. :name - The file name of the image (string) :width - The width of the image (number) :height - The height of the image (number) :sx - The x-coordinate of the subsection of the source image to draw into the destination rectangle (number) :sy - The y-coordinate of the subsection of the source image to draw into the destination rectangle (number) :swidth - The width of the subsection of the source image to draw into the destination rectangle (number) :sheight - The height of the subsection of the source image to draw into the destination rectangle (number) :scale-x - Percent to scale the image in the x-axis (number) :scale-y - Percent to scale the image in the y-axis (number) :flip-x? - Whether to flip the image on its x-axis (boolean) :flip-y? - Whether to flip the image on its y-axis (boolean)
[:image {:name "player_stand.png", :x 0, :y 0, :width 80, :height 80}]

:line

Example

Draws a line (a direct path between two points) to the screen. :x1 - The x-coordinate of the first point (number) :y1 - The y-coordinate of the first point (number) :x2 - The x-coordinate of the second point (number) :y2 - The y-coordinate of the second point (number)
[:line {:x1 0, :y1 0, :x2 50, :y2 50}]

:model

Example

[3D] Draws a model. NOTE: You must pass {:mode :webgl} to the third argument of create-game. :name - The file name of the model (string) :scale-x - Percent to scale the model in the x-axis (number) :scale-y - Percent to scale the model in the y-axis (number) :scale-z - Percent to scale the model in the z-axis (number)
[:rotate {:angle (/ (js/window.performance.now) 1000), :axis :x} [:rotate {:angle (/ (js/window.performance.now) 1000), :axis :y} [:model {:name "chr_old.obj", :scale-x 10, :scale-y 10, :scale-z 10}]]]

:plane

Example

[3D] Draws a plane. NOTE: You must pass {:mode :webgl} to the third argument of create-game. :width - The width of the plane (number) :height - The height of the plane (number) :detail-x - Triangle subdivisions in the x-dimension (number) :detail-y - Triangle subdivisions in the y-dimension (number)
[:rotate {:angle (/ (js/window.performance.now) 1000), :axis :x} [:rotate {:angle (/ (js/window.performance.now) 1000), :axis :y} [:plane {:width 50, :height 50}]]]

:point

Example

Draws a point, a coordinate in space at the dimension of one pixel.
[[:point {:x 5, :y 5}] [:point {:x 10, :y 5}] [:point {:x 15, :y 5}] [:point {:x 20, :y 5}] [:point {:x 25, :y 5}] [:point {:x 30, :y 5}] [:point {:x 35, :y 5}]]

:quad

Example

Draw a quad. A quad is a quadrilateral, a four sided polygon. :x1 - The x-coordinate of the first point (number) :y1 - The y-coordinate of the first point (number) :x2 - The x-coordinate of the second point (number) :y2 - The y-coordinate of the second point (number) :x3 - The x-coordinate of the third point (number) :y3 - The y-coordinate of the third point (number) :x4 - The x-coordinate of the fourth point (number) :y4 - The y-coordinate of the fourth point (number)
[:quad {:x1 50, :y1 55, :x2 70, :y2 15, :x3 10, :y3 15, :x4 20, :y4 55}]

:rect

Example

Draws a rectangle to the screen. A rectangle is a four-sided shape with every angle at ninety degrees. :width - The width of the rectangle (number) :height - The height of the rectangle (number)
[:rect {:x 10, :y 15, :width 20, :height 30}]

:rgb

Example

Causes the color values in all children to be interpreted as RGB colors. :max-r - Range for red (number between 0 and 255) :max-g - Range for green (number between 0 and 255) :max-b - Range for blue (number between 0 and 255) :max-a - Range for alpha (number between 0 and 255)
[:rgb {:max-r 64, :max-g 64, :max-b 64} [:fill {:colors [20 50 70]} [:rect {:x 10, :y 10, :width 70, :height 70}]]]

:rotate

Example

Rotates a shape the amount specified by the angle parameter. :angle - The angle of rotation, in radians (number) :axis - The axis to rotate on (:x, :y, or :z) (:webgl mode only)
[:rotate {:x 100, :y 100, :angle (/ (js/window.performance.now) 1000)} [:rect {:x 0, :y 0, :width 50, :height 50}]]

:shape

Example

Draws a complex shape. :points - The x and y vertexes to draw (vector of numbers)
[:shape {:points [30 20 85 20 85 75 30 75]}]

:sphere

Example

[3D] Draws a sphere. NOTE: You must pass {:mode :webgl} to the third argument of create-game. :radius - The radius of the circle (number) :detail-x - Number of segments in the x-dimension (number) :detail-y - Number of segments in the y-dimension (number)
[:rotate {:angle (/ (js/window.performance.now) 1000), :axis :x} [:rotate {:angle (/ (js/window.performance.now) 1000), :axis :y} [:sphere {:radius 50}]]]

:stroke

Example

Sets the color used to draw lines and borders around the children. :color - The name of the color (string) :colors - The RGB or HSB color values (vector of numbers)
[:stroke {:color "green"} [:rect {:x 50, :y 50, :width 70, :height 70}]]

:text

Example

Draws text to the screen. :value - The text to display (string) :size - The font size (number) :font - The name of the font (string) :style - The font style (:normal, :italic, :bold)
[:text {:value "Hello, world!", :x 0, :y 50, :size 16, :font "Georgia", :style :italic}]

:torus

Example

[3D] Draws a torus. NOTE: You must pass {:mode :webgl} to the third argument of create-game. :radius - The radius of the whole ring (number) :tube-radius - The radius of the tube (number) :detail-x - Number of segments in the x-dimension (number) :detail-y - Number of segments in the y-dimension (number)
[:rotate {:angle (/ (js/window.performance.now) 1000), :axis :x} [:rotate {:angle (/ (js/window.performance.now) 1000), :axis :y} [:torus {:radius 50, :tube-radius 15}]]]

:triangle

Example

A triangle is a plane created by connecting three points. :x1 - The x-coordinate of the first point (number) :y1 - The y-coordinate of the first point (number) :x2 - The x-coordinate of the second point (number) :y2 - The y-coordinate of the second point (number) :x3 - The x-coordinate of the third point (number) :y3 - The y-coordinate of the third point (number)
[:triangle {:x1 10, :y1 10, :x2 50, :y2 25, :x3 10, :y3 35}]

Game

A game object contains the internal renderer object and various bits of state that are important to the overall execution of the game. Every play-cljs game should create just one such object by calling `create-game`.

Screen

Methods in this protocol

A screen object provides the basic lifecycle for a game. Simple games may only need to have one screen. They are a useful way to isolate different aspects of your game. For example, you could make one screen display the title and menu, and another screen contain the game itself. You can create a screen by using `reify` like this: ``` (def main-screen (reify p/Screen (on-show [this]) (on-hide [this]) (on-render [this]))) ```

(create-game width height)

(create-game width height {:keys [parent debug? mode], :or {debug? (not js/COMPILED), mode :2d}, :as opts})

Returns a game object. You can pass an options map with the following: :parent - A DOM element in which to place the canvas :debug? - Whether or not to enable debug mode (defaults to true if :optimizations are set to :none) :mode - Either :2d or :webgl (defaults to :2d)

draw-sketch!

Example

Extending this multimethod allows you to create new entity types. In this example, we create a new entity type called :smiley that draws a smiley face. After defining the method, it can be rendered like this: [:smiley {:x 0 :y 0}]
(defmethod play-cljs.core/draw-sketch! :smiley [game renderer content parent-opts] (let [[_ opts & children] content opts (play-cljs.options/update-opts opts parent-opts play-cljs.options/basic-defaults)] (play-cljs.core/draw-sketch! game renderer [:div {:x 100, :y 100} [:fill {:color "yellow"} [:ellipse {:width 100, :height 100} [:fill {:color "black"} [:ellipse {:x -20, :y -10, :width 10, :height 10}] [:ellipse {:x 20, :y -10, :width 10, :height 10}]] [:fill {} [:arc {:width 60, :height 60, :start 0, :stop 3.14}]]]]] opts) (play-cljs.core/draw-sketch! game renderer children opts)))

(get-asset game name)

Part of the Game protocol

Gets the asset with the given name.

(get-canvas game)

Part of the Game protocol

Returns the internal canvas object.

(get-delta-time game)

Part of the Game protocol

Returns the time since the last frame was rendered, in milliseconds.

(get-height game)

Part of the Game protocol

Returns the virtual height of the game.

(get-pressed-keys game)

Part of the Game protocol

Returns a set containing the key codes for the keys currently being pressed.

(get-renderer game)

Part of the Game protocol

Returns the internal `p5` object. This is the object you need to use to call p5.js functions. We are using p5.js in "instance mode" so its functions are not global.

Example

After retrieving the p5 object, we can call any built-in p5 functions on it.
(let [p5 (get-renderer game)] (.directionalLight p5 (.color p5 250 250 250) (.createVector p5 100 0 0)))

(get-screen game)

Part of the Game protocol

Returns the `Screen` object currently being displayed.

(get-total-time game)

Part of the Game protocol

Returns the total time transpired since the game started, in milliseconds.

(get-width game)

Part of the Game protocol

Returns the virtual width of the game.

(listen game listen-type listener)

Part of the Game protocol

Adds an event listener.

(load-image game path)

Part of the Game protocol

Loads an image. Returns an `Image` object.

(load-model game path)

Part of the Game protocol

Loads a 3D model. Returns a `Geometry` object.

(load-tiled-map game map-name)

Part of the Game protocol

Loads a tiled map. Returns a `TiledMap` object. A tiled map with the provided name must already be loaded (see the TiledMap docs for details).

(on-hide screen)

Part of the Screen protocol

Runs once, when the screen is no longer displayed.

(on-render screen)

Part of the Screen protocol

Runs each time the game is ready to render another frame.

(on-show screen)

Part of the Screen protocol

Runs once, when the screen first appears.

(pre-render game image-name width height content)

Part of the Game protocol

Renders the provided data structure off-screen and associates it with the given name. Returns an `Image` object.

(render game content)

Part of the Game protocol

Renders the provided data structure.

(set-screen game screen)

Part of the Game protocol

Sets the `Screen` object to be displayed.

(set-size game width height)

Part of the Game protocol

Sets the virtual width and height of the game.

(start game)

Part of the Game protocol

Creates the canvas element.