opal-pixi 0.0.1 → 0.1.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 5a87c04aa86e0bd7be498a8c95f272f90ee12912
-  data.tar.gz: 7de8151452abcee9332625a99f031fc6d6ddf0ba
+  metadata.gz: 274f34a9a557089acac1a2a54f50437032bd98f6
+  data.tar.gz: 11494b49e49e51cfd8981e0728565ce2dbd1fe59
 SHA512:
-  metadata.gz: c0f8fed62a7670a822d13ace8a6aa56ec4bdd1ef0b2ffdcd2467d57896cb18cdca760e7243363a32a6d91ecb87d1b8ada6987c188f7dcd4f68c0e74de155ae26
-  data.tar.gz: 2fdd91953ce00bce1b1a39d6e9ae0be6cc383d2ef97e119ecb09a32cf58d775d3477a7f9a8e347bb2c4952394fb44bb0b7e6fbe682da7fccf4c44858003452bc
+  metadata.gz: 22ca67dfe90017c315883683f2e9492cf02abf965a829b06ff63e64545f4e94531712223f3bbcc67eeedb58b5eb8467d4ee96dbb957915eba26ba6c0b40a6d1d
+  data.tar.gz: 299646c8d9960eeb1136e99c5b1b276de700389d294ea6a82c043f19df060046daa5025a73e79926a54aab9846e625837bc3bea9293207d05b1fd932aee27ada

data/Gemfile.lock

@@ -1,23 +1,23 @@
 PATH
   remote: .
   specs:
-    opal-pixi (0.0.1)
-      opal (~> 0.6.0)
+    opal-pixi (0.1.1)
+      opal (~> 0.7.0)
 
 GEM
   remote: https://rubygems.org/
   specs:
     hike (1.2.3)
-    json (1.8.1)
-    multi_json (1.10.1)
-    opal (0.6.3)
-      source_map
-      sprockets
-    rack (1.6.0)
+    multi_json (1.11.2)
+    opal (0.7.2)
+      hike (~> 1.2)
+      sourcemap (~> 0.1.0)
+      sprockets (>= 2.2.3, < 3.0.0)
+      tilt (~> 1.4)
+    rack (1.6.4)
     rake (10.4.2)
-    source_map (3.0.1)
-      json
-    sprockets (2.12.3)
+    sourcemap (0.1.1)
+    sprockets (2.12.4)
       hike (~> 1.2)
       multi_json (~> 1.0)
       rack (~> 1.0)

data/README.md

@@ -0,0 +1,45 @@
+## Ruby wrapper for the Pixi.js graphical library
+
+### Pixi.js - A 2D JavaScript Renderer
+
+- WebGl renderer with canvas fallback
+- "it's fast. Really fast"
+
+Pixie has a nice set of features to bake graphics and even move them around.
+It's low-ish level, but very useful and **fast** .
+
+See the [Pixi's docs](http://pixijs.github.io/docs/) or a post about
+[Version 3](http://www.goodboydigital.com/pixi-js-v3/)
+
+
+### Ruby wrapper
+
+The wrapper is off course done with Opal, but there are no further dependencies.
+
+The project is quite jung, so better to help than expect.
+
+### Usage
+
+Check out the [demo code](https://github.com/orbitalimpact/opal-pixi/blob/master/demo/app/main.rb)
+and read the [pixi resources](https://github.com/GoodBoyDigital/pixi.js/wiki/Resources)
+
+Two main components are needed, a Container and a Renderer.
+You can add things to display to a container,
+like Sprites (with texture) and all sorts of objects and collections thereof.
+
+And then you can get the view element from the renderer and add it to your dom.
+
+And render the container with the [requestAnimationFrame](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame)
+method. There are some links there about the new async way to render.
+
+### Demo
+
+There is a small demo in the demo directory. To run it clone the repository,
+
+```
+cd demo
+bundle
+bundle exec rackup
+```
+
+and go to localhost:9292

data/demo/Gemfile

@@ -1,4 +1,3 @@
 source 'https://rubygems.org'
 
 gem 'opal-pixi', path: '..'
-gem 'opal-browser', github: 'opal/opal-browser'

data/demo/Gemfile.lock

@@ -1,22 +1,22 @@
 PATH
   remote: ..
   specs:
-    opal-pixi (0.0.1)
-      opal (~> 0.6.0)
+    opal-pixi (0.1.0)
+      opal (~> 0.7.0)
 
 GEM
   remote: https://rubygems.org/
   specs:
     hike (1.2.3)
-    json (1.8.1)
-    multi_json (1.10.1)
-    opal (0.6.3)
-      source_map
-      sprockets
-    rack (1.6.0)
-    source_map (3.0.1)
-      json
-    sprockets (2.12.3)
+    multi_json (1.11.2)
+    opal (0.7.2)
+      hike (~> 1.2)
+      sourcemap (~> 0.1.0)
+      sprockets (>= 2.2.3, < 3.0.0)
+      tilt (~> 1.4)
+    rack (1.6.4)
+    sourcemap (0.1.1)
+    sprockets (2.12.4)
       hike (~> 1.2)
       multi_json (~> 1.0)
       rack (~> 1.0)

data/demo/app/main.rb

@@ -4,26 +4,46 @@ require 'native'
 
 class Game
   def initialize
-    stage = PIXI::Stage.new 0x66FF99
-    renderer = PIXI::WebGLRenderer.new 400, 300
+    stage = PIXI::Container.new
+
+    height = `window.innerHeight`
+    width =  `window.innerWidth`
+    renderer = PIXI::WebGLRenderer.new(width, height , {"backgroundColor" => 0x66FF99})
+
 
     # opal-jquery would clean this up
     body = Native(`window.document.body`)
     body.appendChild renderer.view
 
 
-    texture = PIXI::Texture.from_image "bunny.png"
-    bunny = PIXI::Sprite.new texture
-    bunny.anchor = PIXI::Point.new(0.5, 0.5)
-    bunny.position = PIXI::Point.new(300, 150)
+    texture        = PIXI::Texture.from_image "bunny.png"
+    bunny          = PIXI::Sprite.new texture
+    bunny.anchor   = PIXI::Point.new(0.5, 0.5)
+    bunny.position = PIXI::Point.new(width / 2, height / 2)
+
+    bunny.interactive = true
+    bunny.on('mousedown') do
+      puts "mouse down"
+    end
 
     stage.add_child(bunny)
 
+    text = PIXI::Text.new("Sample text ")
+    text.position = PIXI::Point.new( 50 , 50 )
+    stage.add_child text
+    counter = 1
     animate = Proc.new do
-      `requestAnimFrame(animate)`
+      `requestAnimationFrame(animate)`
       bunny.rotation += 0.1
+      text.position.x += 5
+      if( text.position.x + text.width > renderer.width )
+        text.position.set( 50 , 50 )
+        text.text = "Sample text " + counter.to_s
+        counter += 1
+      end
       renderer.render stage
     end
-    `requestAnimFrame(animate)`
+
+    animate.call
   end
-end
+end

data/demo/index.html

@@ -4,7 +4,7 @@
         <meta charset= "utf-8" />
         <title>Opal-Pixi</title>
         <link rel="stylesheet" href="style.css">
-        <script src="//cdnjs.cloudflare.com/ajax/libs/pixi.js/2.2.0/pixi.js"></script>
+        <script src="/pixi.js"></script>
         <script src="/assets/main.js"></script>
     </head>
 
@@ -15,4 +15,4 @@
         }
       </script>
     </body>
-</html>
+</html>