UnityMirror/spine-runtimes
1
0
Fork 0
mirror of https://github.com/EsotericSoftware/spine-runtimes.git synced 2025-12-21 01:36:02 +08:00
Code Issues Packages Projects Releases Wiki Activity

[ts] playing around with playground.

Browse Source
This commit is contained in:
badlogic 2017-10-13 16:49:03 +02:00
parent 5a7db58772
commit c4df324038
7 changed files with 96 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
spine-ts/webgl/example/js/ace.js Normal file
View File

File diff suppressed because one or more lines are too long

1
spine-ts/webgl/example/js/mode-html.js Normal file
View File

File diff suppressed because one or more lines are too long

1
spine-ts/webgl/example/js/mode-javascript.js Normal file
View File

File diff suppressed because one or more lines are too long

1
spine-ts/webgl/example/js/theme-monokai.js Normal file
View File

@ -0,0 +1 @@
define("ace/theme/monokai",["require","exports","module","ace/lib/dom"],function(e,t,n){t.isDark=!0,t.cssClass="ace-monokai",t.cssText=".ace-monokai .ace_gutter {background: #2F3129;color: #8F908A}.ace-monokai .ace_print-margin {width: 1px;background: #555651}.ace-monokai {background-color: #272822;color: #F8F8F2}.ace-monokai .ace_cursor {color: #F8F8F0}.ace-monokai .ace_marker-layer .ace_selection {background: #49483E}.ace-monokai.ace_multiselect .ace_selection.ace_start {box-shadow: 0 0 3px 0px #272822;}.ace-monokai .ace_marker-layer .ace_step {background: rgb(102, 82, 0)}.ace-monokai .ace_marker-layer .ace_bracket {margin: -1px 0 0 -1px;border: 1px solid #49483E}.ace-monokai .ace_marker-layer .ace_active-line {background: #202020}.ace-monokai .ace_gutter-active-line {background-color: #272727}.ace-monokai .ace_marker-layer .ace_selected-word {border: 1px solid #49483E}.ace-monokai .ace_invisible {color: #52524d}.ace-monokai .ace_entity.ace_name.ace_tag,.ace-monokai .ace_keyword,.ace-monokai .ace_meta.ace_tag,.ace-monokai .ace_storage {color: #F92672}.ace-monokai .ace_punctuation,.ace-monokai .ace_punctuation.ace_tag {color: #fff}.ace-monokai .ace_constant.ace_character,.ace-monokai .ace_constant.ace_language,.ace-monokai .ace_constant.ace_numeric,.ace-monokai .ace_constant.ace_other {color: #AE81FF}.ace-monokai .ace_invalid {color: #F8F8F0;background-color: #F92672}.ace-monokai .ace_invalid.ace_deprecated {color: #F8F8F0;background-color: #AE81FF}.ace-monokai .ace_support.ace_constant,.ace-monokai .ace_support.ace_function {color: #66D9EF}.ace-monokai .ace_fold {background-color: #A6E22E;border-color: #F8F8F2}.ace-monokai .ace_storage.ace_type,.ace-monokai .ace_support.ace_class,.ace-monokai .ace_support.ace_type {font-style: italic;color: #66D9EF}.ace-monokai .ace_entity.ace_name.ace_function,.ace-monokai .ace_entity.ace_other,.ace-monokai .ace_entity.ace_other.ace_attribute-name,.ace-monokai .ace_variable {color: #A6E22E}.ace-monokai .ace_variable.ace_parameter {font-style: italic;color: #FD971F}.ace-monokai .ace_string {color: #E6DB74}.ace-monokai .ace_comment {color: #75715E}.ace-monokai .ace_indent-guide {background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAEklEQVQImWPQ0FD0ZXBzd/wPAAjVAoxeSgNeAAAAAElFTkSuQmCC) right repeat-y}";var r=e("../lib/dom");r.importCssString(t.cssText,t.cssClass)})

1
spine-ts/webgl/example/js/worker-html.js Normal file
View File

File diff suppressed because one or more lines are too long

1
spine-ts/webgl/example/js/worker-javascript.js Normal file
View File

File diff suppressed because one or more lines are too long

77
spine-ts/webgl/example/tutorial.html Normal file
View File

@ -0,0 +1,77 @@
<html>
<script src="../../build/spine-webgl.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<style>
/* Dead Simple Grid (c) 2015 Vladimir Agafonkin */
.row .row { margin: 0 -1.5em; }
.col { padding: 0 1.5em; }
.row:after {
content: "";
clear: both;
display: table;
}
@media only screen { .col {
float: left;
width: 100%;
box-sizing: border-box;
}}
@media only screen and (min-width: 30em) {
.content { width: 60%; height: 100%; padding: 0 }
.sidebar { width: 40%; height: 100%; padding: 0 }
}
body {
margin: 0;
}
iframe {
width: 100%;
height: 100%;
border:none;
}
.panel {
width: 100%;
height: 50%;
}
.buttons {
position: absolute;
top: 5; left: 5;
}
</style>
<body>
<div class="buttons">
<button id="playButton">Run</button>
<button id="stopButton">Stop</button>
</div>
<div class="row">
<div class="col content">
<iframe id="iframe"></iframe>
</div>
<div class="col sidebar">
<div id="codeJs" class="panel"></div>
<div id="codeHtml" class="panel"></div>
</div>
</div>
</body>
<script src="js/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
var editorJs = ace.edit("codeJs");
editorJs.setTheme("ace/theme/monokai");
editorJs.getSession().setMode("ace/mode/javascript");
editorJs.setValue("");
var editorHtml = ace.edit("codeHtml");
editorHtml.setTheme("ace/theme/monokai");
editorHtml.getSession().setMode("ace/mode/html");
editorHtml.setValue('<canvas style="background: #cccccc; width: 100%; height: 100%;"></canvas><');
$("#playButton").click(function() {
var iframe = document.getElementById("iframe");
iframe.srcdoc = '<html><body>' + editorHtml.getValue() + '<script>' + editorJs.getValue() + "</script></body></html>";
});
</script>
</html>