Jaylib - 3, Basics

(Previous article: Jaylib - 2, Docs)

I’m learning Jaylib/Raylib myself as I write this, but here are a few morsels I can provide:

• When you draw, coordinates are in pixels and start at the top left of your window. So, if you think of horizontal as the x-direction and vertical as the y-direction, then the origin [0, 0] is at the top left, with y pointing down.

• Raylib uses double-buffering, and your program runs in a loop that (after initializing things) goes like:

  check if looping should continue (if not, exits loop)
      update the game/world
      begin-drawing (starts you off with a new buffer)
          clear screen
          draw   the game/world
      end-drawing (swaps buffers)

• To keep organized, it’s useful to separate out your functions into init-game, update-game, and draw-game (see below). If you’re not writing a game, you could always instead name them something like init-sim, update-sim, and draw-sim, but these articles will use the *-game function names.

• So that your game/sim/rendering loop doesn’t speed out of control, you call (set-target-fps 60) in your init-game so raylib knows when enough is enough.

Here’s an example of how that all looks:

#!/usr/bin/env janet

(import jaylib :as jl)

(def screen-width  800)
(def screen-height 400)

(defn init-game
  []
  (jl/init-window screen-width
                  screen-height
                  "Title Goes Here")
  (jl/set-target-fps 60)
  (jl/hide-cursor))

(defn update-game
  []
  (comment "Nothing to update at the moment."))

(defn draw-game
  []
  (let [[x y] (jl/get-mouse-position)]
    (jl/draw-circle-gradient x y 40 :lime :red)))

(defn main
  [& args]
  (init-game)
  (while (not (jl/window-should-close))
    (update-game)
    (jl/begin-drawing)
    (jl/clear-background [0 0 0])
    (draw-game)
    (jl/end-drawing))
  (jl/close-window))

(Please excuse the temporary lack of proper Janet syntax-highlighting here.)

Running this will produce a window where the colorful circle follows your mouse around:

Some comments on that code:

• For clarity, I like to have the “jl/” prefix on the jaylib functions.
• This is a 2-dimensional game, using the default “camera” (the origin is at the top left and we’re looking at the middle of the window).
• If you wanted to, you could place the camera somewhere else, which means you’d need to explicitly create a camera object, tweak some of its settings in init-game, and possibly update them as needed in update-game. You’d also need to wrap your drawing code (inside draw-game) with (begin-mode-2d my-camera) and (end-mode-2d). (Possibly coming up in a future article here.)
• Again, this is a 2D game, but you could instead embark upon making it a 3D game by using (similar to as described above) (begin-mode-3d my-3d-camera) and (end-mode-3d).
• In Raylib example code (in C) you often see some function calls indented to visually indicate the pair of functions they’re grouped between. That’s not done in the above Janet code — I just use the standard lispy indentation.

(Next up: Jaylib - 4, The Bouncing Square)