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
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])))
```
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-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)))
(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).