Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
187 lines (150 sloc) 4.56 KB

Dojo #1 - Multisnake

Dave Snowdon, Nikita Beloglazov

https://github.com/davesnowdon/multisnake

./images/multisnake.png

Torus Pong

A Clojure Cup 2013 contribution by:

Jon Neale, Paul Lam, Thomas Kristensen, Ragnar Dahlen

https://github.com/uswitch/torus-pong

./images/pong_med.png

Dojo #2 - THREE.js

./images/threejs.png

Massive Multiplayer Online 3D Snake

./images/snake-3d.png

Demo

Network: SMEX4

http://192.168.11.177:8080

  • Snake: arrow keys
  • View: a, s, d

State machine

./images/game-state.png

Multi-client

./images/game-state-2.png

Game Tick


  (go
    (loop [game-state game-core/initial-game-state
           commands   []
           timer      (timeout (long params/tick-ms))]
            (let [[v c] (alts! [timer command-chan] :priority true)]
              (condp = c
                command-chan (when v
                               (recur game-state (conj commands v) timer))
                timer (let [updated-game-state
                              (game-core/advance game-state commands)]
                        (>! game-state-channel updated-game-state)
                        (recur updated-game-state
                               []
                               (timeout (long params/tick-ms))))))))
  

On the client


 ;; All clients receive (almost) the same game state

 {:player-id 4
  :snakes [{:body ([19 9 15] [19 8 15] [19 7 15])
            :dir [0 1 0]
            :id 4
            :orientation 1}]
   :apples #{[14 14 6] [7 18 19] [2 4 17] [19 15 17]}}
  

  (go (loop [previous-arena (make-arena quaternion)]
          (let [game-state (<! c)
                new-arena (make-arena quaternion)]
            (.remove scene previous-arena)
            (draw-game-state new-arena game-state)
            (.add scene new-arena)
            (recur new-arena))))

Minecraft - Voxels

./images/Minecraft-360.jpg

Three.js components

  • Scene
  • Mesh
  • Camera
  • Renderer (WebGL or Canvas)

Three.js components


(let [scene    (THREE/Scene.)
      geometry (THREE/CubeGeometry. 10 10 10)
      material (THREE/MeshBasicMaterial.
                 (clj->js {:wireframe true :color 0x000000}))]
  (.add scene (THREE/Mesh. geometry material)))

  ;; Frustrum left, right, top, bottom, near and far planes

  (let [scene  (THREE/Scene.)
        camera (THREE/OrthographicCamera. (/ width -2) (/ width 2)
			                  (/ height 2) (/ height -2)
                                          1 1000)]
    (.add scene camera))
  

  ;; Three.js can render using WebGL or 2D Canvas API
  
  (let [renderer (if (.WebGLRenderingContext js/window)
                   (THREE/WebGLRenderer.)
                   (THREE/CanvasRenderer.))]
    (.render renderer scene camera))
  

Fez - Trixels

./images/fez.png

Orthographic Camera

./images/ortho.png

Foreign Libs


;; Inside project.clj
  
:foreign-libs [{:file "resources/public/three.max.js"
                :provides ["three"]}
               {:file "resources/public/tween.max.js"
                :provides ["tween"]}]

;; Inside cljs source

(ns multiplay.views.arena
  (:require [three]
            [tween]))

Advanced mode


  ;; Inside project.clj
  
  :optimizations :advanced
  :externs ["resources/public/three.extern.js"
            "resources/public/tween.extern.js"]
  

  1. 2.0MB raw
  2. 650K pruned
  3. 130K pruned + gzipped

Thank You

https://github.com/henrygarner/multisnake https://github.com/henrygarner/ldnclj-talk-nov-2013 ./images/henrygarner.jpeg

@henrygarner

CTO, Likely