-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
138 lines (125 loc) · 2.71 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<!DOCTYPE html>
<html>
<head>
<title>RUNPIXI.js Documentation (Version B)</title>
<meta charset="UTF-8" />
<style>
html, body, #wrapper
{
width: 100%;
height: 100%;
min-height: 100%;
padding: 0;
margin: 0;
}
#wrapper
{
border: 2px solid #0033FF;
}
#pixiscreen
{
width: 100%;
height: 100%;
margin: 0 auto;
/* border: 2px solid #FFAA00; */
position: absolute;
top: 0px;
left: 0px;
z-index: -10;
}
.centered
{
margin: 0 auto;
text-align: center;
}
</style>
</head>
<body>
<div id="pixiscreen"></div>
<div id="content">
<h1>RUNPIXI.js Documentation</h1>
<br />
Do you a see moving background? This is the test window.
</br>
All written by hand, just that you know it.<br />
<br>
Fast introduction:<br />
* Create a div with an id (here: pixiscreen) with a given (fixed) width and height,<br />
* include the source files with the <a href="http://github.com/ben0bi/ben0biJSLoader">ben0biJSLoader (github)</a> :) or directly in the html file:<br />
<br />
** pixi.js from <a href="http://pixijs.com">pixijs.com</a>,<br />
** then RUNPIXI.js or RUNPIXI_B.js,<br />
<br />
* create a loop function or use NUFF for your game logic (in a <script>):<br />
<br />
* then call <i>PIXI.RUN("pixiscreen", loop);</i> and look what the console gives you.<br />
<br />
* after that, call PIXI.PIXELATED(); for a pixel-perfect view for your pixel-perfect game. :)<br />
<br />
More docs later, see README.txt for further information about version A.
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
Yay! You made it.
</div>
<!-- We use jQuery here only for positioning the background. -->
<script src="extern/jquery.min.js"></script>
<script src="extern/pixi.min.js"></script>
<script src="RUNPIXI_B.js"></script>
<script>
// move the pixi screen to the scroll position.
$(window).scroll(function(){
$('#pixiscreen').css('top', $(window).scrollTop());
});
$(document).ready(function(){
// nuff, NUFF, nullFunc are null functions which do nothing and return nothing.
PIXI.RUN('pixiscreen', nuff, 0xFFCC33); // Or use 0xRRGGBB for your bg color.
//PIXI.PIXELATED(); // make it pixel perfect.
// load a texture. This should be done by a loader, I just want to show something.
PIXI.loader.add("testImage.png").load(setup);
// let's do some magic.
// PIXI.CreateFullSprite(tex, 10, 10);
});
function setup()
{
var he = PIXI.CreateSpriteDefault(PIXI.loader.resources["testImage.png"].texture, 100,100);
PIXI.STAGE.addChild(he);
RPlog("Setup Done.");
}
</script>
</body>
</html>