opal-pixi 0.0.1 → 0.1.1
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/Gemfile.lock +11 -11
- data/README.md +45 -0
- data/demo/Gemfile +0 -1
- data/demo/Gemfile.lock +11 -11
- data/demo/app/main.rb +29 -9
- data/demo/index.html +2 -2
- data/demo/pixi.js +27488 -0
- data/demo/pixi.js.map +1 -0
- data/demo/pixi.min.js +11 -0
- data/demo/pixi.min.js.map +1 -0
- data/demo/{main.js → pixi_main.js} +0 -0
- data/lib/opal/pixi/container.rb +12 -0
- data/lib/opal/pixi/graphics.rb +28 -0
- data/lib/opal/pixi/point.rb +61 -7
- data/lib/opal/pixi/sprite.rb +22 -21
- data/lib/opal/pixi/text.rb +22 -0
- data/lib/opal/pixi/texture.rb +4 -5
- data/lib/opal/pixi/version.rb +1 -1
- data/lib/opal/pixi/web_gl_renderer.rb +12 -13
- data/lib/opal/pixi.rb +4 -1
- data/opal-pixi.gemspec +3 -3
- metadata +15 -9
- data/lib/opal/pixi/stage.rb +0 -16
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 274f34a9a557089acac1a2a54f50437032bd98f6
|
4
|
+
data.tar.gz: 11494b49e49e51cfd8981e0728565ce2dbd1fe59
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 22ca67dfe90017c315883683f2e9492cf02abf965a829b06ff63e64545f4e94531712223f3bbcc67eeedb58b5eb8467d4ee96dbb957915eba26ba6c0b40a6d1d
|
7
|
+
data.tar.gz: 299646c8d9960eeb1136e99c5b1b276de700389d294ea6a82c043f19df060046daa5025a73e79926a54aab9846e625837bc3bea9293207d05b1fd932aee27ada
|
data/Gemfile.lock
CHANGED
@@ -1,23 +1,23 @@
|
|
1
1
|
PATH
|
2
2
|
remote: .
|
3
3
|
specs:
|
4
|
-
opal-pixi (0.
|
5
|
-
opal (~> 0.
|
4
|
+
opal-pixi (0.1.1)
|
5
|
+
opal (~> 0.7.0)
|
6
6
|
|
7
7
|
GEM
|
8
8
|
remote: https://rubygems.org/
|
9
9
|
specs:
|
10
10
|
hike (1.2.3)
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
sprockets
|
16
|
-
|
11
|
+
multi_json (1.11.2)
|
12
|
+
opal (0.7.2)
|
13
|
+
hike (~> 1.2)
|
14
|
+
sourcemap (~> 0.1.0)
|
15
|
+
sprockets (>= 2.2.3, < 3.0.0)
|
16
|
+
tilt (~> 1.4)
|
17
|
+
rack (1.6.4)
|
17
18
|
rake (10.4.2)
|
18
|
-
|
19
|
-
|
20
|
-
sprockets (2.12.3)
|
19
|
+
sourcemap (0.1.1)
|
20
|
+
sprockets (2.12.4)
|
21
21
|
hike (~> 1.2)
|
22
22
|
multi_json (~> 1.0)
|
23
23
|
rack (~> 1.0)
|
data/README.md
CHANGED
@@ -0,0 +1,45 @@
|
|
1
|
+
## Ruby wrapper for the Pixi.js graphical library
|
2
|
+
|
3
|
+
### Pixi.js - A 2D JavaScript Renderer
|
4
|
+
|
5
|
+
- WebGl renderer with canvas fallback
|
6
|
+
- "it's fast. Really fast"
|
7
|
+
|
8
|
+
Pixie has a nice set of features to bake graphics and even move them around.
|
9
|
+
It's low-ish level, but very useful and **fast** .
|
10
|
+
|
11
|
+
See the [Pixi's docs](http://pixijs.github.io/docs/) or a post about
|
12
|
+
[Version 3](http://www.goodboydigital.com/pixi-js-v3/)
|
13
|
+
|
14
|
+
|
15
|
+
### Ruby wrapper
|
16
|
+
|
17
|
+
The wrapper is off course done with Opal, but there are no further dependencies.
|
18
|
+
|
19
|
+
The project is quite jung, so better to help than expect.
|
20
|
+
|
21
|
+
### Usage
|
22
|
+
|
23
|
+
Check out the [demo code](https://github.com/orbitalimpact/opal-pixi/blob/master/demo/app/main.rb)
|
24
|
+
and read the [pixi resources](https://github.com/GoodBoyDigital/pixi.js/wiki/Resources)
|
25
|
+
|
26
|
+
Two main components are needed, a Container and a Renderer.
|
27
|
+
You can add things to display to a container,
|
28
|
+
like Sprites (with texture) and all sorts of objects and collections thereof.
|
29
|
+
|
30
|
+
And then you can get the view element from the renderer and add it to your dom.
|
31
|
+
|
32
|
+
And render the container with the [requestAnimationFrame](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame)
|
33
|
+
method. There are some links there about the new async way to render.
|
34
|
+
|
35
|
+
### Demo
|
36
|
+
|
37
|
+
There is a small demo in the demo directory. To run it clone the repository,
|
38
|
+
|
39
|
+
```
|
40
|
+
cd demo
|
41
|
+
bundle
|
42
|
+
bundle exec rackup
|
43
|
+
```
|
44
|
+
|
45
|
+
and go to localhost:9292
|
data/demo/Gemfile
CHANGED
data/demo/Gemfile.lock
CHANGED
@@ -1,22 +1,22 @@
|
|
1
1
|
PATH
|
2
2
|
remote: ..
|
3
3
|
specs:
|
4
|
-
opal-pixi (0.0
|
5
|
-
opal (~> 0.
|
4
|
+
opal-pixi (0.1.0)
|
5
|
+
opal (~> 0.7.0)
|
6
6
|
|
7
7
|
GEM
|
8
8
|
remote: https://rubygems.org/
|
9
9
|
specs:
|
10
10
|
hike (1.2.3)
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
sprockets
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
sprockets (2.12.
|
11
|
+
multi_json (1.11.2)
|
12
|
+
opal (0.7.2)
|
13
|
+
hike (~> 1.2)
|
14
|
+
sourcemap (~> 0.1.0)
|
15
|
+
sprockets (>= 2.2.3, < 3.0.0)
|
16
|
+
tilt (~> 1.4)
|
17
|
+
rack (1.6.4)
|
18
|
+
sourcemap (0.1.1)
|
19
|
+
sprockets (2.12.4)
|
20
20
|
hike (~> 1.2)
|
21
21
|
multi_json (~> 1.0)
|
22
22
|
rack (~> 1.0)
|
data/demo/app/main.rb
CHANGED
@@ -4,26 +4,46 @@ require 'native'
|
|
4
4
|
|
5
5
|
class Game
|
6
6
|
def initialize
|
7
|
-
stage = PIXI::
|
8
|
-
|
7
|
+
stage = PIXI::Container.new
|
8
|
+
|
9
|
+
height = `window.innerHeight`
|
10
|
+
width = `window.innerWidth`
|
11
|
+
renderer = PIXI::WebGLRenderer.new(width, height , {"backgroundColor" => 0x66FF99})
|
12
|
+
|
9
13
|
|
10
14
|
# opal-jquery would clean this up
|
11
15
|
body = Native(`window.document.body`)
|
12
16
|
body.appendChild renderer.view
|
13
17
|
|
14
18
|
|
15
|
-
texture
|
16
|
-
bunny
|
17
|
-
bunny.anchor
|
18
|
-
bunny.position = PIXI::Point.new(
|
19
|
+
texture = PIXI::Texture.from_image "bunny.png"
|
20
|
+
bunny = PIXI::Sprite.new texture
|
21
|
+
bunny.anchor = PIXI::Point.new(0.5, 0.5)
|
22
|
+
bunny.position = PIXI::Point.new(width / 2, height / 2)
|
23
|
+
|
24
|
+
bunny.interactive = true
|
25
|
+
bunny.on('mousedown') do
|
26
|
+
puts "mouse down"
|
27
|
+
end
|
19
28
|
|
20
29
|
stage.add_child(bunny)
|
21
30
|
|
31
|
+
text = PIXI::Text.new("Sample text ")
|
32
|
+
text.position = PIXI::Point.new( 50 , 50 )
|
33
|
+
stage.add_child text
|
34
|
+
counter = 1
|
22
35
|
animate = Proc.new do
|
23
|
-
`
|
36
|
+
`requestAnimationFrame(animate)`
|
24
37
|
bunny.rotation += 0.1
|
38
|
+
text.position.x += 5
|
39
|
+
if( text.position.x + text.width > renderer.width )
|
40
|
+
text.position.set( 50 , 50 )
|
41
|
+
text.text = "Sample text " + counter.to_s
|
42
|
+
counter += 1
|
43
|
+
end
|
25
44
|
renderer.render stage
|
26
45
|
end
|
27
|
-
|
46
|
+
|
47
|
+
animate.call
|
28
48
|
end
|
29
|
-
end
|
49
|
+
end
|
data/demo/index.html
CHANGED
@@ -4,7 +4,7 @@
|
|
4
4
|
<meta charset= "utf-8" />
|
5
5
|
<title>Opal-Pixi</title>
|
6
6
|
<link rel="stylesheet" href="style.css">
|
7
|
-
<script src="
|
7
|
+
<script src="/pixi.js"></script>
|
8
8
|
<script src="/assets/main.js"></script>
|
9
9
|
</head>
|
10
10
|
|
@@ -15,4 +15,4 @@
|
|
15
15
|
}
|
16
16
|
</script>
|
17
17
|
</body>
|
18
|
-
</html>
|
18
|
+
</html>
|