-
Notifications
You must be signed in to change notification settings - Fork 5
/
Copy pathindex.html
128 lines (98 loc) · 8.26 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
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8">
<title>Phaser Inspector by netcell</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="stylesheets/normalize.css" media="screen">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="stylesheets/stylesheet.css" media="screen">
<link rel="stylesheet" type="text/css" href="stylesheets/github-light.css" media="screen">
</head>
<body>
<section class="page-header">
<h1 class="project-name">Phaser Inspector</h1>
<h2 class="project-tagline">phaser, game, html5, framework, plugin, inspector, debug</h2>
<a href="https://github.com/netcell/phaser-inspector" class="btn">View on GitHub</a>
<a href="https://github.com/netcell/phaser-inspector/zipball/master" class="btn">Download .zip</a>
<a href="https://github.com/netcell/phaser-inspector/tarball/master" class="btn">Download .tar.gz</a>
</section>
<section class="main-content">
<h1>
<a id="phaser-inspector-plugin" class="anchor" href="#phaser-inspector-plugin" aria-hidden="true"><span class="octicon octicon-link"></span></a>Phaser Inspector Plugin</h1>
<p><strong>Phaser Inspector Plugin</strong> allows you to inspect your (or someone else) <a href="http://phaser.io">Phaser</a> game.</p>
<p><img src="https://farm6.staticflickr.com/5619/21076450010_efa799bf08_o.png" alt="Floating, resizable and minimizable"><img src="https://farm1.staticflickr.com/730/21076450170_23796d65a4_o.png" alt="Intelligent Inspector with object tree, search and edit, state control and bounds drawing"></p>
<p>The plugin is written using <a href="https://angularjs.org/">Angular.js</a> and ES6, compiled with <a href="babeljs.io">Babel</a> and <a href="http://browserify.org/">Browserify</a>, tested on Phaser 2.1.3 and Phaser 2.4.3 running on Google Chrome Version 45.0.2454.85 (64-bit) on OSX Yosemite.</p>
<p><strong>Working features:</strong></p>
<ul>
<li>Display objects <strong>tree</strong> inspection.</li>
<li>Display object <strong>class</strong> guessing.</li>
<li>Display object <strong>name</strong> guessing (by looking for <code>this./name/</code> in parents).</li>
<li>
<strong>Text</strong> as name for Phaser.Text.</li>
<li>Display objects <strong>non-case-sensitive search</strong> by name and class.</li>
<li>Display object <strong>destroy/kill/hide</strong>.</li>
<li>
<strong>Properties</strong> inspection and editting.</li>
<li>
<strong>Texture display</strong> for sprite/image</li>
<li>
<strong>Bounds</strong> drawing</li>
<li>
<strong>States</strong> list and state change</li>
<li>
<strong>Floating</strong>, <strong>resizable</strong> and <strong>draggable</strong> panel</li>
<li>Panel <strong>remember</strong> position on page reload</li>
<li>
<strong>Close/minimize</strong> panel</li>
</ul>
<p><strong>Upcoming features:</strong></p>
<ul>
<li>
<strong>Transparent/Clickthrough</strong> panel</li>
<li>Sprite/Image <strong>load Texture</strong>
</li>
<li>
<strong>Optimize</strong> when displaying too many display objects on the tree </li>
</ul>
<p>Feel free to follow me on twitter <a href="https://twitter.com/netcell">@netcell</a> and check out <a href="http://anhnt.ninja">my blog</a>!</p>
<h2>
<a id="demo" class="anchor" href="#demo" aria-hidden="true"><span class="octicon octicon-link"></span></a>Demo</h2>
<p>Check the <code>example</code> folder (please run <code>bower install</code> before that, and serve the folder on a server/localhost) or try that example rightaway on <a href="http://codepen.io/netcell/full/gapZWG/">this codepen</a>.</p>
<h2>
<a id="download" class="anchor" href="#download" aria-hidden="true"><span class="octicon octicon-link"></span></a>Download</h2>
<p>The source is available for download from <a href="https://github.com/netcell/phaser-inspector/releases">latest release</a> or by cloning the repository or download the files in <code>build</code> folder. Alternatively, you can install via:</p>
<ul>
<li><del><a href="http://bower.io/">bower</a>: <code>bower install --save phaser-inspector</code></del></li>
</ul>
<h2>
<a id="usage" class="anchor" href="#usage" aria-hidden="true"><span class="octicon octicon-link"></span></a>Usage</h2>
<p><strong>NOTE:</strong> I have only tested this plugin on Google Chrome so I am not sure how this would perform on other browsers. Also since this plugin is for debugging your game, you should not expect to use it on your mobile devices, meaning remove it (or conditionally not loading it) when deploying to mobile devices.</p>
<p>Simply download the <code>phaser-inspector.js</code> or <code>phaser-inspector.min.js</code> script from <a href="https://github.com/netcell/phaser-inspector/releases">latest release</a> and include it on your page after including Phaser:</p>
<div class="highlight highlight-html"><pre><<span class="pl-ent">script</span> <span class="pl-e">src</span>=<span class="pl-s"><span class="pl-pds">"</span>phaser.js<span class="pl-pds">"</span></span>></<span class="pl-ent">script</span>>
<<span class="pl-ent">script</span> <span class="pl-e">src</span>=<span class="pl-s"><span class="pl-pds">"</span>phaser-inspector.js<span class="pl-pds">"</span></span>></<span class="pl-ent">script</span>></pre></div>
<p>In the <code>create</code> method in your boot state:</p>
<div class="highlight highlight-javascript"><pre>game.<span class="pl-c1">plugins</span>.<span class="pl-c1">add</span>(Phaser.<span class="pl-c1">Plugin</span>.Inspector);</pre></div>
<p>Alternatively, when running a game in the browser, you can inject the plugin in the developer console as follow:</p>
<div class="highlight highlight-javascript"><pre><span class="pl-k">var</span> script <span class="pl-k">=</span> <span class="pl-c1">document</span>.<span class="pl-c1">createElement</span>(<span class="pl-s"><span class="pl-pds">'</span>script<span class="pl-pds">'</span></span>); script.src <span class="pl-k">=</span> <span class="pl-s"><span class="pl-pds">"</span>http://netcell.github.io/phaser-inspector/build/phaser-inspector.js<span class="pl-pds">"</span></span>; <span class="pl-c1">document</span>.<span class="pl-c1">getElementsByTagName</span>(<span class="pl-s"><span class="pl-pds">'</span>head<span class="pl-pds">'</span></span>)[<span class="pl-c1">0</span>].<span class="pl-c1">appendChild</span>(script); <span class="pl-k">function</span> <span class="pl-en">phaserInspectorInject</span>(){ <span class="pl-k">if</span> (Phaser.<span class="pl-c1">Plugin</span>.Inspector) Phaser.GAMES[<span class="pl-c1">0</span>].<span class="pl-c1">plugins</span>.<span class="pl-c1">add</span>(Phaser.<span class="pl-c1">Plugin</span>.Inspector); <span class="pl-k">else</span> <span class="pl-c1">setTimeout</span>(phaserInspectorInject); } <span class="pl-c1">setTimeout</span>(phaserInspectorInject);</pre></div>
<p>Check the example in <code>example</code> folder to see it in action :)</p>
<h3>
<a id="license" class="anchor" href="#license" aria-hidden="true"><span class="octicon octicon-link"></span></a>License</h3>
<p>This content is released under the (<a href="http://opensource.org/licenses/MIT">http://opensource.org/licenses/MIT</a>) MIT License.</p>
<footer class="site-footer">
<span class="site-footer-owner"><a href="https://github.com/netcell/phaser-inspector">Phaser Inspector</a> is maintained by <a href="https://github.com/netcell">netcell</a>.</span>
<span class="site-footer-credits">This page was generated by <a href="https://pages.github.com">GitHub Pages</a> using the <a href="https://github.com/jasonlong/cayman-theme">Cayman theme</a> by <a href="https://twitter.com/jasonlong">Jason Long</a>.</span>
</footer>
</section>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-62565835-2");
pageTracker._trackPageview();
} catch(err) {}
</script>
</body>
</html>