diff --git a/README.md b/README.md index 0d465125..2ba38146 100644 --- a/README.md +++ b/README.md @@ -96,6 +96,8 @@ Version 1.0.7 (in progress in the dev branch) * Re-implemented Angular Velocity and Angular Acceleration on the Sprite.body and created 2 new examples to show use. * Moved the Camera update checks to World.postUpdate, so all the sprites get the correct adjusted camera position. * Added Sprite.fixedToCamera boolean. A Sprite that is fixed to the camera doesn't move with the world, but has its x/y coordinates relative to the top-left of the camera. +* Updated InputHandler to use Math.round rather than Math.floor when snapping an object during drag. + * TODO: look at Sprite.crop (http://www.html5gamedevs.com/topic/1617-error-in-spritecrop/) diff --git a/examples/html/css/stylesheet.css b/examples/html/css/stylesheet.css new file mode 100644 index 00000000..962af412 --- /dev/null +++ b/examples/html/css/stylesheet.css @@ -0,0 +1,165 @@ +/* reset css starts */ +html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;} +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;} +body {line-height: 1;} +ol, ul {list-style: none;} +blockquote, q {quotes: none;} +blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none;} +table {border-collapse: collapse; border-spacing: 0;} +/* reset css ends */ +@font-face{font-family: 'HelveticaBd'; src: url('../fonts/HelveticaNeueLTStd-Bd.otf');} + +body{margin:0;padding:0; overflow-x:hidden; font-family: 'HelveticaBd', Helvetica, Arial, Tahoma, Verdana !important; background: #e0e4f1;} + +a{color:#fff; text-decoration: none;} +a:hover{text-decoration: underline;} + +.helvetica{font-family: 'HelveticaBd', Helvetica, Arial, Tahoma, Verdana !important;} +.header{background: #e0e4f1 url('../img/header-bg.jpg') no-repeat; width:100%; margin:0; padding:0; background-size: cover; height: 910px; display: block; clear:both; margin-bottom: -400px} +.main-container{display: block; clear:both; width: 1125px; height: auto; margin:0 auto;} +ul.nav-links{margin:0;padding:0;display: inline-block; float: right; list-style-type: none; color: #fff; font-size: 15px; line-height: 2em; margin-top: 50px; min-width: 180px;} +ul.nav-links > li{margin:0; padding:0; list-style-type: none; padding-left: 55px;} +ul.nav-links > li > a{color: #fff; text-decoration: none;} +ul.nav-links > li > a:hover{text-decoration: underline;} +.link-home, .link-latest, .link-forum, .link-docs, .link-twitter{background-image: url('../img/nav-icons.png'); background-repeat: no-repeat;} + +.main-title{font-size:55px;color:#fff;text-shadow:0 0 15px #b643e6; text-align: center; display: block; text-transform: uppercase; margin: 40px auto 0 auto;} +.link-home{background-position: 0 -9px;} +.link-latest{background-position: 0 -37px;} +.link-forum{background-position: 0 -67px;} +.link-docs{background-position: 0 -97px;} +.link-twitter{background-position: 0 -127px;} +.phaser-examples{background: url('../img/phaser-examples.png') no-repeat; display: block; width: 485px; height: 205px; margin: 20px auto;} +.phaser-version{float: right; background: url('../img/phaser-version.png') no-repeat; display: block; width: 345px; height: 30px; color: #fff; font-size: 11px; text-shadow: 1px 1px #000; right:0; top:0; } +.phaser-version > span{margin-top: 10px; display: inline-block; margin-left: 60px; margin-right: 25px;} +.phaser-version > a{color: #fff; text-decoration: none; background: url('../img/version-button.png') no-repeat; background-size: cover; display: inline-block; width: 123px; height: 10px; vertical-align: middle; text-align: center;padding-top:11px; padding-bottom: 11px} +.phaser-version > a:hover{text-decoration: underline;} +.phaser-logo{display: block; float: right; width: 168px;height: 144px; background: url('../img/phaser-logo.png') no-repeat; margin-top: 40px; margin-right: 40px;} + +.line{display:block;clear:both; width:100%; margin:0;padding:0; float:left; background-color: transparent;} +.go-top{margin-top: -200px;} +.box5, .box10, .box15 .box20, .box25, .box30, .box35, .box40, .box45, .box50, .box55, .box60, .box65, .box70, .box75, .box80, .box85, .box90, .box95, .box100{position: relative;display: inline-block; box-sizing: border-box; padding: 5px 10px; -moz-box-sizing: border-box; vertical-align: top; margin:0;} +.float-right{float:right !important;} + +.box5{width:4%; min-width: 100px; float:left;} +.box10{width:9%; min-width: 100px; float:left;} +.box15{width:14%; min-width: 150px;float:left;} +.box20{width:19%; min-width: 200px;float:left;} +.box25{width:24%; min-width: 250px;float:left;} +.box30{width:29%; min-width: 300px;float:left;} +.box35{width:34%; min-width: 350px;float:left;} +.box40{width:39%; min-width: 400px;float:left;} +.box45{width:44%; min-width: 450px;float:left;} +.box50{width:49%; min-width: 500px;float:left;} +.box55{width:54%; min-width: 550px;float:left;} +.box60{width:59%; min-width: 600px;float:left;} +.box65{width:64%; min-width: 650px;float:left;} +.box70{width:69%; min-width: 700px;float:left;} +.box75{width:74%; min-width: 750px;float:left;} +.box80{width:79%; min-width: 800px;float:left;} +.box85{width:84%; min-width: 850px;float:left;} +.box90{width:89%; min-width: 900px;float:left;} +.box95{width:94%; min-width: 950px;float:left;} +.box100, .clear, .clear5, .clear10, .clear15, .clear20, .clear25{width:100%; clear: both;} +.clear{display: block;} +.clear5{height: 10px;} +.clear10{height: 20px;} +.clear15{height: 30px;} +.clear20{height: 40px;} +.clear25{height: 50px;} +.strong{text-transform: uppercase !important;} +.no-margin{margin:0 !important;} +.no-padding{padding:0 !important;} +.box-center{float: none !important; margin-left: auto !important; margin-right: auto !important;} +.txt-center{text-align: center !important;} + +p.title{font-size: 30px; color: #fff; text-shadow: 0 1px 3px #9e6ce8; text-align: right;} +p.count-examples{font-size: 12px; color: #676773; text-align: right;} + +ul.group-items{background-image: url('../img/laser1.png'); background-repeat: no-repeat; background-position: left top 5px; padding-left: 125px; width: 875px !important;} +ul.group-items > li{width: 213px; padding-top: 15px; height: 35px; background: url('../img/group-item.png') no-repeat; text-align: center; display: inline-block; margin-bottom: 15px} +ul.group-items > li a{display:block; width:100%; height: 100%; padding: 20px 0; margin-top: -20px; color:#333;} +ul.group-items > li a:hover{cursor: pointer; text-decoration: underline;} +ul.group-items > li a span.mark{display:inline-block;width: 1px; height: 25px; vertical-align: middle;} +ul.group-items > li a:visited span.mark{background: url('../img/group-item-hover.png') no-repeat; background-position: center center;width:25px; padding-left:4px;} + +.laser2{background-image: url('../img/laser2.png') !important; background-repeat: no-repeat; background-position: center 20px;} +.laser3{background-image: url('../img/laser3.png') !important; background-repeat: no-repeat; background-position: center 20px;} +.laser4{background-image: url('../img/laser4.png') !important; background-repeat: no-repeat; background-position: center 20px;} +.laser5{background-image: url('../img/laser5.png') !important; background-repeat: no-repeat; background-position: center 20px;} +.laser6{background-image: url('../img/laser6.png') !important; background-repeat: no-repeat; background-position: center 20px;} +.laser7{background-image: url('../img/laser7.png') !important; background-repeat: no-repeat; background-position: center 20px;} +.laser8{background-image: url('../img/laser8.png') !important; background-repeat: no-repeat; background-position: center 20px;} +.laser9{background-image: url('../img/laser9.png') !important; background-repeat: no-repeat; background-position: center 20px;} +.laser10{background-image: url('../img/laser10.png') !important; background-repeat: no-repeat; background-position: center 20px;} + +.bright-bg, .dark-bg{border-bottom: 1px solid #d1d1d1; padding:25px 0;} +.bright-bg{background-color: #e0e0ee;} +.dark-bg{background-color:#e0e4f1;} +.border-bottom{border-bottom: 1px solid #d1d1d1;} + +.prize-bg{background: url('../img/prize-bg.png') no-repeat; background-size: cover; background-position: center center; height: 326px; width: 100%;} +.gradient{background: url('../img/gradient-bg') repeat-y;} +.prize-button{text-transform: uppercase; color: #000; text-shadow: 1px 0 #fff; float:right; background: url('../img/prize-button.png') no-repeat; width: 300px; height: 70px; padding-top:135px; font-size: 16px; padding-left: 75px; margin-top: 25px; margin-right: 145px;} + +.footer{background: #e0e4f1 url('../img/footer-bg.jpg') no-repeat; background-size: cover; width:100%; height: 425px; bottom:0; color:#fff; text-shadow: 1px 1px 0 #000; line-height: 1.25em; font-size: 15px;} +.photonstorm-logo{background: url('../img/photonstorm-logo.png') no-repeat; background-size: cover; display: block;clear:both; width:113px;height:15px; margin-bottom: 6px;} +.flixel-logo{display:block; clear:both; width:26px; height:50px; background: url('../img/flixel-logo.png') no-repeat;} +.forums-icon, .twitter-icon, .github-icon{background: url('../img/forums-icon.png') no-repeat; vertical-align: middle; padding-left: 68px; height: 35px; display: inline-block; padding-top: 25px;} +.twitter-icon{background: url('../img/twitter-icon.png') no-repeat;} +.github-icon{background: url('../img/github-icon.png') no-repeat;} + +.footer > .main-container > .line{margin-top: 270px;} + +ul.footer-links{list-style-type: none; width:100%; clear:both; padding:0; margin:0; float:right; margin-top: -20px;} +ul.footer-links > li{display: inline-block; padding:0; margin:0; float:right;} + + +.game-panel{width:800px; height: 680px; overflow: hidden; display:block; clear:both;box-shadow: 0 0 15px #6ac8f8; margin:-150px auto 0 auto; border-radius: 10px; position: relative; z-index: 10;} +.game-screen{display:block; clear:both; width:800px;height:600px;margin:0;} +.game-controls{display:block; width:100%; height:80px; margin:0; padding:0;background: url('../img/game-controls-bg.jpg') repeat-x;} +ul.left-controls{float:left; list-style-type: none; margin:30px 0 0 25px;padding:0; display: inline-block;} +ul.left-controls > li{margin:0;padding:0; display: inline-block; vertical-align: middle;} +.controls-label{display:inline-block; width:80px; height:9px; background: url('../img/controls-label.png') no-repeat;} +.up-label{display: inline-block; width:11px; height: 11px; background: url('../img/up-label.png') no-repeat;} +.down-label{display: inline-block; width:11px; height: 11px; background: url('../img/down-label.png') no-repeat;} +.left-label{display: inline-block; width:13px; height: 11px; background: url('../img/left-label.png') no-repeat;} +.right-label{display: inline-block; width:12px; height: 11px; background: url('../img/right-label.png') no-repeat;} +.space-label{display: inline-block; width:64px; height: 18px; background: url('../img/space-label.png') no-repeat;} + +ul.right-controls{float:right;list-style-type: none; padding:0; display: inline-block; margin: 15px 25px 0 0;} +ul.right-controls > li{margin:0;padding:0; display: inline-block; vertical-align: middle;} +.pause-button{width: 121px; height:52px; display:inline-block; background: url('../img/pause-button.png') no-repeat;} +.mute-button{width: 121px; height:52px; display:inline-block; background: url('../img/mute-button.png') no-repeat;} +.reset-button{width: 121px; height:52px; display:inline-block; background: url('../img/reset-button.png') no-repeat;} +.pause-button:hover, .mute-button:hover, .reset-button:hover{cursor: pointer;} +.filler{height: 420px;} +.code-block{width:750px; height:auto; overflow: hidden;margin:0 auto;border-radius: 10px;background:#fdfdfd; border:0 !important; box-shadow: inset 0 5px 15px rgba(0,0,0,0.15), 0 0 10px rgba(106,200,248,0.5); padding: 25px !important;display: block; margin-bottom: 20px; margin-top: 30px;} +.px800{width:800px; clear:both; display: block; margin:0 auto; line-height: 1.5em;} +.gradient p{color:#333;} + +@media only screen and (max-width: 1235px), only screen and (max-device-width: 1235px){ + ul.nav-links{min-width:100% !important;} + ul.nav-links > li{display: inline-block;} +} +@media only screen and (max-width: 1120px), only screen and (max-device-width: 1120px){ + .footer .box20, .footer .box55, .footer .box15{display: block; clear:both; margin:10px auto; text-align: center; float:none;} + .footer .box5{display:none;} + .photonstorm-logo{margin:10px auto;} + .footer .box55{width:100%; float:none; margin:10px auto;} + .footer ul.footer-links{width:100%;} + .footer ul.footer-links > li{float:none;} + .footer > .main-container > .line{margin-top: 125px;} +} +@media only screen and (max-width: 1020px), only screen and (max-device-width: 1020px){ + .phaser-logo{display:none;} + .header{margin-bottom: -350px;} + p.title, p.count-examples{text-align: center;} + .box20, .box60{min-width:100% !important; clear:both; width: 100% !important; max-width: 100% !important; text-align: center;} + a.prize-button{margin:0 auto; float:none;display:block;} + .prize-bg{background: transparent;} +} +@media only screen and (max-width: 810px), only screen and (max-device-width: 810px){ + .main-container{width:100%;} +} \ No newline at end of file diff --git a/examples/html/demo.html b/examples/html/demo.html new file mode 100644 index 00000000..274016de --- /dev/null +++ b/examples/html/demo.html @@ -0,0 +1,110 @@ + + + + + + + + + +
+
+
+ Phaser Version: 1.0.6 + Update to 1.0.7 +
+
+
+
+
+ +
+
+ Starstruck +
+
+ +
+
+
+ +
+
    +
  • +
  • +
  • +
  • +
  • +
  • +
+
    +
  • +
  • +
  • +
+
+
+
+ +
+
+

Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies.

+

Curabitur et ligula. Ut molestie a, ultricies porta urna. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna.

+ 
+        var Phaser;
+        (function (Phaser) {
+          var Basic = (function () {
+            function Basic(game) {
+              this.name = 'Space Harrier';
+              this._game = game;
+              this.ID = -1;
+              this.exists = true;
+              this.active = true;
+            }
+            Basic.prototype.destroy = 
+            function () {
+            };
+            // Code Comment        
+            Basic.prototype.toString = 
+            function () {
+              return "";
+            };
+            return Basic;
+          })();
+          Phaser.Basic = Basic;
+        })(Phaser || (Phaser = {}));
+
+
+
+ +
+
+
+
+
+
+ + © 2013 Photon Storm Ltd.
+ All rights reserved. +
+
+ +
+
+ Looking for a flash game framework?
+ Try flixel! +
+
+ +
+
+
+
+ + \ No newline at end of file diff --git a/examples/html/fonts/HelveticaNeueLTStd-Bd.otf b/examples/html/fonts/HelveticaNeueLTStd-Bd.otf new file mode 100644 index 00000000..d4ac7c11 Binary files /dev/null and b/examples/html/fonts/HelveticaNeueLTStd-Bd.otf differ diff --git a/examples/html/img/controls-label.png b/examples/html/img/controls-label.png new file mode 100644 index 00000000..384c986c Binary files /dev/null and b/examples/html/img/controls-label.png differ diff --git a/examples/html/img/down-label.png b/examples/html/img/down-label.png new file mode 100644 index 00000000..0039d57b Binary files /dev/null and b/examples/html/img/down-label.png differ diff --git a/examples/html/img/flixel-logo.png b/examples/html/img/flixel-logo.png new file mode 100644 index 00000000..cb50f865 Binary files /dev/null and b/examples/html/img/flixel-logo.png differ diff --git a/examples/html/img/footer-bg.jpg b/examples/html/img/footer-bg.jpg new file mode 100644 index 00000000..ba8c17ae Binary files /dev/null and b/examples/html/img/footer-bg.jpg differ diff --git a/examples/html/img/forums-icon.png b/examples/html/img/forums-icon.png new file mode 100644 index 00000000..79c1c8b1 Binary files /dev/null and b/examples/html/img/forums-icon.png differ diff --git a/examples/html/img/game-controls-bg.jpg b/examples/html/img/game-controls-bg.jpg new file mode 100644 index 00000000..82e40bf8 Binary files /dev/null and b/examples/html/img/game-controls-bg.jpg differ diff --git a/examples/html/img/github-icon.png b/examples/html/img/github-icon.png new file mode 100644 index 00000000..e04eb798 Binary files /dev/null and b/examples/html/img/github-icon.png differ diff --git a/examples/html/img/gradient-bg.jpg b/examples/html/img/gradient-bg.jpg new file mode 100644 index 00000000..0669f104 Binary files /dev/null and b/examples/html/img/gradient-bg.jpg differ diff --git a/examples/html/img/group-item-hover.png b/examples/html/img/group-item-hover.png new file mode 100644 index 00000000..bf0fc009 Binary files /dev/null and b/examples/html/img/group-item-hover.png differ diff --git a/examples/html/img/group-item.png b/examples/html/img/group-item.png new file mode 100644 index 00000000..9638cad4 Binary files /dev/null and b/examples/html/img/group-item.png differ diff --git a/examples/html/img/header-bg.jpg b/examples/html/img/header-bg.jpg new file mode 100644 index 00000000..b5cafc40 Binary files /dev/null and b/examples/html/img/header-bg.jpg differ diff --git a/examples/html/img/laser1.png b/examples/html/img/laser1.png new file mode 100644 index 00000000..4c23aa16 Binary files /dev/null and b/examples/html/img/laser1.png differ diff --git a/examples/html/img/laser10.png b/examples/html/img/laser10.png new file mode 100644 index 00000000..bf1cc440 Binary files /dev/null and b/examples/html/img/laser10.png differ diff --git a/examples/html/img/laser2.png b/examples/html/img/laser2.png new file mode 100644 index 00000000..61d63083 Binary files /dev/null and b/examples/html/img/laser2.png differ diff --git a/examples/html/img/laser3.png b/examples/html/img/laser3.png new file mode 100644 index 00000000..90a74a01 Binary files /dev/null and b/examples/html/img/laser3.png differ diff --git a/examples/html/img/laser4.png b/examples/html/img/laser4.png new file mode 100644 index 00000000..2e99d190 Binary files /dev/null and b/examples/html/img/laser4.png differ diff --git a/examples/html/img/laser5.png b/examples/html/img/laser5.png new file mode 100644 index 00000000..ee8c3b7e Binary files /dev/null and b/examples/html/img/laser5.png differ diff --git a/examples/html/img/laser6.png b/examples/html/img/laser6.png new file mode 100644 index 00000000..5bb2d5d5 Binary files /dev/null and b/examples/html/img/laser6.png differ diff --git a/examples/html/img/laser7.png b/examples/html/img/laser7.png new file mode 100644 index 00000000..d96a5ad9 Binary files /dev/null and b/examples/html/img/laser7.png differ diff --git a/examples/html/img/laser8.png b/examples/html/img/laser8.png new file mode 100644 index 00000000..5d086fa1 Binary files /dev/null and b/examples/html/img/laser8.png differ diff --git a/examples/html/img/laser9.png b/examples/html/img/laser9.png new file mode 100644 index 00000000..d735325a Binary files /dev/null and b/examples/html/img/laser9.png differ diff --git a/examples/html/img/left-label.png b/examples/html/img/left-label.png new file mode 100644 index 00000000..8f796dda Binary files /dev/null and b/examples/html/img/left-label.png differ diff --git a/examples/html/img/mute-button.png b/examples/html/img/mute-button.png new file mode 100644 index 00000000..dccd26af Binary files /dev/null and b/examples/html/img/mute-button.png differ diff --git a/examples/html/img/nav-icons.png b/examples/html/img/nav-icons.png new file mode 100644 index 00000000..faf9201e Binary files /dev/null and b/examples/html/img/nav-icons.png differ diff --git a/examples/html/img/pause-button.png b/examples/html/img/pause-button.png new file mode 100644 index 00000000..c5bcfd38 Binary files /dev/null and b/examples/html/img/pause-button.png differ diff --git a/examples/html/img/phaser-examples.png b/examples/html/img/phaser-examples.png new file mode 100644 index 00000000..8900dba6 Binary files /dev/null and b/examples/html/img/phaser-examples.png differ diff --git a/examples/html/img/phaser-logo.png b/examples/html/img/phaser-logo.png new file mode 100644 index 00000000..3a72d92e Binary files /dev/null and b/examples/html/img/phaser-logo.png differ diff --git a/examples/html/img/phaser-version.png b/examples/html/img/phaser-version.png new file mode 100644 index 00000000..5839174b Binary files /dev/null and b/examples/html/img/phaser-version.png differ diff --git a/examples/html/img/photonstorm-logo.png b/examples/html/img/photonstorm-logo.png new file mode 100644 index 00000000..75ae525b Binary files /dev/null and b/examples/html/img/photonstorm-logo.png differ diff --git a/examples/html/img/prize-bg.png b/examples/html/img/prize-bg.png new file mode 100644 index 00000000..f6215e7d Binary files /dev/null and b/examples/html/img/prize-bg.png differ diff --git a/examples/html/img/prize-button.png b/examples/html/img/prize-button.png new file mode 100644 index 00000000..b70eaec3 Binary files /dev/null and b/examples/html/img/prize-button.png differ diff --git a/examples/html/img/reset-button.png b/examples/html/img/reset-button.png new file mode 100644 index 00000000..54f821da Binary files /dev/null and b/examples/html/img/reset-button.png differ diff --git a/examples/html/img/right-label.png b/examples/html/img/right-label.png new file mode 100644 index 00000000..1163d197 Binary files /dev/null and b/examples/html/img/right-label.png differ diff --git a/examples/html/img/screenshot.jpg b/examples/html/img/screenshot.jpg new file mode 100644 index 00000000..da010c1d Binary files /dev/null and b/examples/html/img/screenshot.jpg differ diff --git a/examples/html/img/space-label.png b/examples/html/img/space-label.png new file mode 100644 index 00000000..073632ec Binary files /dev/null and b/examples/html/img/space-label.png differ diff --git a/examples/html/img/twitter-icon.png b/examples/html/img/twitter-icon.png new file mode 100644 index 00000000..3d7a57c3 Binary files /dev/null and b/examples/html/img/twitter-icon.png differ diff --git a/examples/html/img/up-label.png b/examples/html/img/up-label.png new file mode 100644 index 00000000..1df6f042 Binary files /dev/null and b/examples/html/img/up-label.png differ diff --git a/examples/html/img/version-button.png b/examples/html/img/version-button.png new file mode 100644 index 00000000..4017049a Binary files /dev/null and b/examples/html/img/version-button.png differ diff --git a/examples/html/index.html b/examples/html/index.html new file mode 100644 index 00000000..74733f8e --- /dev/null +++ b/examples/html/index.html @@ -0,0 +1,157 @@ + + + + + + + + +
+
+
+ Phaser Version: 1.0.6 + Update to 1.0.7 +
+
+
+
+
+ +
+
+
+
+
+ +
+
+
+
+ +
+
+

audio

+

9 examples

+
+
+ +
+
+
+
+
+

Collision

+

3 examples

+
+
+ +
+
+
+
+
+

Tilemaps

+

7 examples

+
+
+ +
+
+
+
+
+
+ View details & submit +
+
+
+ +
+
+
+
+
+
+ + © 2013 Photon Storm Ltd.
+ All rights reserved. +
+
+ +
+
+ Looking for a flash game framework?
+ Try flixel! +
+
+ +
+
+
+
+ + \ No newline at end of file diff --git a/examples/html/js/application.js b/examples/html/js/application.js new file mode 100644 index 00000000..acf906b8 --- /dev/null +++ b/examples/html/js/application.js @@ -0,0 +1,25 @@ +$(document).ready(function(){ + $('ul.group-items').each(function(i){ + var liAmount = $(this).children('li').length; + if ((liAmount/4)>9){ + $(this).addClass('laser10'); + }else if((liAmount/4)>8){ + $(this).addClass('laser9'); + }else if((liAmount/4)>7){ + $(this).addClass('laser8'); + }else if((liAmount/4)>6){ + $(this).addClass('laser7'); + }else if((liAmount/4)>5){ + $(this).addClass('laser6'); + }else if((liAmount/4)>4){ + $(this).addClass('laser5'); + }else if((liAmount/4)>3){ + $(this).addClass('laser4'); + }else if((liAmount/4)>2){ + $(this).addClass('laser3'); + }else if((liAmount/4)>1){ + $(this).addClass('laser2'); + } + console.log(liAmount/4); + }); +}); \ No newline at end of file diff --git a/examples/index.php b/examples/index.php index 0dca19bb..b9324e28 100644 --- a/examples/index.php +++ b/examples/index.php @@ -1,7 +1,7 @@ diff --git a/src/input/InputHandler.js b/src/input/InputHandler.js index b08d2acd..985f8af1 100644 --- a/src/input/InputHandler.js +++ b/src/input/InputHandler.js @@ -727,8 +727,8 @@ Phaser.InputHandler.prototype = { if (this.snapOnDrag) { - this.sprite.x = Math.floor(this.sprite.x / this.snapX) * this.snapX; - this.sprite.y = Math.floor(this.sprite.y / this.snapY) * this.snapY; + this.sprite.x = Math.round(this.sprite.x / this.snapX) * this.snapX; + this.sprite.y = Math.round(this.sprite.y / this.snapY) * this.snapY; } return true; @@ -941,8 +941,8 @@ Phaser.InputHandler.prototype = { if (this.snapOnRelease) { - this.sprite.x = Math.floor(this.sprite.x / this.snapX) * this.snapX; - this.sprite.y = Math.floor(this.sprite.y / this.snapY) * this.snapY; + this.sprite.x = Math.round(this.sprite.x / this.snapX) * this.snapX; + this.sprite.y = Math.round(this.sprite.y / this.snapY) * this.snapY; } this.sprite.events.onDragStop.dispatch(this.sprite, pointer); diff --git a/src/tilemap/Tilemap.js b/src/tilemap/Tilemap.js index ad19fd81..5d2506d1 100644 --- a/src/tilemap/Tilemap.js +++ b/src/tilemap/Tilemap.js @@ -1,134 +1,5 @@ -/** -* @author Richard Davey -* @copyright 2013 Photon Storm Ltd. -* @license https://github.com/photonstorm/phaser/blob/master/license.txt MIT License -* @module Phaser.Tilemap -*/ - - -/** -* Create a new Tilemap. -* @class Phaser.Tilemap -* @classdesc This GameObject allows for the display of a tilemap within the game world. Tile maps consist of an image, tile data and a size. -* Internally it creates a TilemapLayer for each layer in the tilemap. -* @constructor -* @param {Phaser.Game} game - Current game instance. -* @param {string} key - Asset key for this map. -* @param {object} x - Description. -* @param {object} y - Description. -* @param {boolean} resizeWorld - Resize the world bound automatically based on this tilemap? -* @param {number} tileWidth - Width of tiles in this map (used for CSV maps). -* @param {number} tileHeight - Height of tiles in this map (used for CSV maps). -*/ Phaser.Tilemap = function (game, key, x, y, resizeWorld, tileWidth, tileHeight) { - if (typeof resizeWorld === "undefined") { resizeWorld = true; } - if (typeof tileWidth === "undefined") { tileWidth = 0; } - if (typeof tileHeight === "undefined") { tileHeight = 0; } - - /** - * @property {Phaser.Game} game - A reference to the currently running game. - */ - this.game = game; - - /** - * @property {Description} group - Description. - */ - this.group = null; - - /** - * @property {string} name - The user defined name given to this Description. - * @default - */ - this.name = ''; - - /** - * @property {Description} key - Description. - */ - this.key = key; - - /** - * @property {number} renderOrderID - Render iteration counter - * @default - */ - this.renderOrderID = 0; - - /** - * @property {boolean} collisionCallback - Tilemap collision callback. - * @default - */ - this.collisionCallback = null; - - /** - * @property {boolean} exists - Description. - * @default - */ - this.exists = true; - - /** - * @property {boolean} visible - Description. - * @default - */ - this.visible = true; - - this.width = 0; - this.height = 0; - - /** - * @property {boolean} tiles - Description. - * @default - */ - this.tiles = []; - - /** - * @property {boolean} layers - Description. - * @default - */ - this.layers = []; - - var map = this.game.cache.getTilemap(key); - - PIXI.DisplayObjectContainer.call(this); - - /** - * @property {Description} position - Description. - */ - this.position.x = x; - this.position.y = y; - - /** - * @property {Description} type - Description. - */ - this.type = Phaser.TILEMAP; - - /** - * @property {Description} renderer - Description. - */ - this.renderer = new Phaser.TilemapRenderer(this.game); - - this.fixedToCamera = true; - - /** - * @property {Description} mapFormat - Description. - */ - this.mapFormat = map.format; - - switch (this.mapFormat) - { - case Phaser.Tilemap.CSV: - this.parseCSV(map.mapData, key, tileWidth, tileHeight); - break; - - case Phaser.Tilemap.JSON: - this.parseTiledJSON(map.mapData, key); - break; - } - - if (this.currentLayer && resizeWorld) - { - this.game.world.setBounds(0, 0, this.width, this.heightIn); - } - }; // Needed to keep the PIXI.Sprite constructor in the prototype chain (as the core pixi renderer uses an instanceof check sadly) @@ -138,393 +9,3 @@ Phaser.Tilemap.prototype.constructor = Phaser.Tilemap; Phaser.Tilemap.CSV = 0; Phaser.Tilemap.JSON = 1; -/** -* Parse csv map data and generate tiles. -* -* @method Phaser.Tilemap.prototype.parseCSV -* @param {string} data - CSV map data. -* @param {string} key - Asset key for tileset image. -* @param {number} tileWidth - Width of its tile. -* @param {number} tileHeight - Height of its tile. -*/ -Phaser.Tilemap.prototype.parseCSV = function (data, key, tileWidth, tileHeight) { - - var layer = new Phaser.TilemapLayer(this, 0, key, Phaser.Tilemap.CSV, 'TileLayerCSV' + this.layers.length.toString(), tileWidth, tileHeight); - - // Trim any rogue whitespace from the data - data = data.trim(); - - var rows = data.split("\n"); - - for (var i = 0; i < rows.length; i++) - { - var column = rows[i].split(","); - - if (column.length > 0) - { - layer.addColumn(column); - } - } - - layer.updateBounds(); - layer.createCanvas(); - - var tileQuantity = layer.parseTileOffsets(); - - this.currentLayer = layer; - this.collisionLayer = layer; - this.layers.push(layer); - - this.width = this.currentLayer.widthInPixels; - this.height = this.currentLayer.heightInPixels; - - this.generateTiles(tileQuantity); - -}; - -/** -* Parse JSON map data and generate tiles. -* -* @method Phaser.Tilemap.prototype.parseTiledJSON -* @param {string} data - JSON map data. -* @param {string} key - Asset key for tileset image. -*/ -Phaser.Tilemap.prototype.parseTiledJSON = function (json, key) { - - for (var i = 0; i < json.layers.length; i++) - { - var layer = new Phaser.TilemapLayer(this, i, key, Phaser.Tilemap.JSON, json.layers[i].name, json.tilewidth, json.tileheight); - - // Check it's a data layer - if (!json.layers[i].data) - { - continue; - } - - // layer.createQuadTree(json.tilewidth * json.layers[i].width, json.tileheight * json.layers[i].height); - - layer.alpha = json.layers[i].opacity; - layer.visible = json.layers[i].visible; - layer.tileMargin = json.tilesets[0].margin; - layer.tileSpacing = json.tilesets[0].spacing; - - var c = 0; - var row; - - for (var t = 0; t < json.layers[i].data.length; t++) - { - if (c == 0) - { - row = []; - } - - row.push(json.layers[i].data[t]); - c++; - - if (c == json.layers[i].width) - { - layer.addColumn(row); - c = 0; - } - } - - layer.updateBounds(); - layer.createCanvas(); - - var tileQuantity = layer.parseTileOffsets(); - - this.currentLayer = layer; - this.collisionLayer = layer; - this.layers.push(layer); - - if (this.currentLayer.widthInPixels > this.width) - { - this.width = this.currentLayer.widthInPixels; - } - - if (this.currentLayer.heightInPixels > this.height) - { - this.height = this.currentLayer.heightInPixels; - } - } - - this.generateTiles(tileQuantity); - -}; - -/** -* Create tiles of given quantity. -* @method Phaser.Tilemap.prototype.generateTiles -* @param {number} qty - Quantity of tiles to be generated. -*/ -Phaser.Tilemap.prototype.generateTiles = function (qty) { - - for (var i = 0; i < qty; i++) - { - this.tiles.push(new Phaser.Tile(this.game, this, i, this.currentLayer.tileWidth, this.currentLayer.tileHeight)); - } - -}; - -/** -* Set callback to be called when this tilemap collides. -* -* @method Phaser.Tilemap.prototype.setCollisionCallback -* @param {object} context - Callback will be called with this context. -* @param {Function} callback - Callback function. -*/ -Phaser.Tilemap.prototype.setCollisionCallback = function (context, callback) { - - this.collisionCallbackContext = context; - this.collisionCallback = callback; - -}; - -/** -* Set collision configs of tiles in a range index. -* -* @method Phaser.Tilemap.prototype.setCollisionRange -* @param {number} start - First index of tiles. -* @param {number} end - Last index of tiles. -* @param {number} collision - Bit field of flags. (see Tile.allowCollision) -* @param {boolean} resetCollisions - Reset collision flags before set. -* @param {boolean} separateX - Enable separate at x-axis. -* @param {boolean} separateY - Enable separate at y-axis. -*/ -Phaser.Tilemap.prototype.setCollisionRange = function (start, end, left, right, up, down, resetCollisions, separateX, separateY) { - - if (typeof resetCollisions === "undefined") { resetCollisions = false; } - if (typeof separateX === "undefined") { separateX = true; } - if (typeof separateY === "undefined") { separateY = true; } - - for (var i = start; i < end; i++) - { - this.tiles[i].setCollision(left, right, up, down, resetCollisions, separateX, separateY); - } - -}; - -/** -* Set collision configs of tiles with given index. -* @param {number[]} values - Index array which contains all tile indexes. The tiles with those indexes will be setup with rest parameters. -* @param {number} collision - Bit field of flags (see Tile.allowCollision). -* @param {boolean} resetCollisions - Reset collision flags before set. -* @param {boolean} left - Indicating collide with any object on the left. -* @param {boolean} right - Indicating collide with any object on the right. -* @param {boolean} up - Indicating collide with any object on the top. -* @param {boolean} down - Indicating collide with any object on the bottom. -* @param {boolean} separateX - Enable separate at x-axis. -* @param {boolean} separateY - Enable separate at y-axis. -*/ -Phaser.Tilemap.prototype.setCollisionByIndex = function (values, left, right, up, down, resetCollisions, separateX, separateY) { - - if (typeof resetCollisions === "undefined") { resetCollisions = false; } - if (typeof separateX === "undefined") { separateX = true; } - if (typeof separateY === "undefined") { separateY = true; } - - for (var i = 0; i < values.length; i++) - { - this.tiles[values[i]].setCollision(left, right, up, down, resetCollisions, separateX, separateY); - } - -}; - -// Tile Management - -/** -* Get the tile by its index. -* @param {number} value - Index of the tile you want to get. -* @return {Tile} The tile with given index. -*/ -Phaser.Tilemap.prototype.getTileByIndex = function (value) { - - if (this.tiles[value]) - { - return this.tiles[value]; - } - - return null; - -}; - -/** -* Get the tile located at specific position and layer. -* @param {number} x - X position of this tile located. -* @param {number} y - Y position of this tile located. -* @param {number} [layer] - layer of this tile located. -* @return {Tile} The tile with specific properties. -*/ -Phaser.Tilemap.prototype.getTile = function (x, y, layer) { - - if (typeof layer === "undefined") { layer = this.currentLayer.ID; } - - return this.tiles[this.layers[layer].getTileIndex(x, y)]; - -}; - -/** -* Get the tile located at specific position (in world coordinate) and layer (thus you give a position of a point which is within the tile). -* @param {number} x - X position of the point in target tile. -* @param {number} y - Y position of the point in target tile. -* @param {number} [layer] - layer of this tile located. -* @return {Tile} The tile with specific properties. -*/ -Phaser.Tilemap.prototype.getTileFromWorldXY = function (x, y, layer) { - - if (typeof layer === "undefined") { layer = this.currentLayer.ID; } - - return this.tiles[this.layers[layer].getTileFromWorldXY(x, y)]; - -}; - -/** -* Gets the tile underneath the Input.x/y position. -* @param {number} layer - The layer to check, defaults to 0. -* @return {Tile} -*/ -Phaser.Tilemap.prototype.getTileFromInputXY = function (layer) { - - if (typeof layer === "undefined") { layer = this.currentLayer.ID; } - - return this.tiles[this.layers[layer].getTileFromWorldXY(this.game.input.worldX, this.game.input.worldY)]; - -}; - -/** -* Get tiles overlaps the given object. -* @param {GameObject} object - Tiles you want to get that overlaps this. -* @return {array} Array with tiles information (Each contains x, y and the tile). -*/ -Phaser.Tilemap.prototype.getTileOverlaps = function (object) { - - return this.currentLayer.getTileOverlaps(object); - -}; - -// COLLIDE - -/** -* Check whether this tilemap collides with the given game object or group of objects. -* @param {Function} objectOrGroup - Target object of group you want to check. -* @param {Function} callback - This is called if objectOrGroup collides the tilemap. -* @param {object} context - Callback will be called with this context. -* @return {boolean} Return true if this collides with given object, otherwise return false. -*/ -Phaser.Tilemap.prototype.collide = function (objectOrGroup, callback, context) { - - objectOrGroup = objectOrGroup || this.game.world.group; - callback = callback || null; - context = context || null; - - if (callback && context) - { - this.collisionCallback = callback; - this.collisionCallbackContext = context; - } - - if (objectOrGroup instanceof Phaser.Group) - { - objectOrGroup.forEachAlive(this.collideGameObject, this); - } - else - { - this.collideGameObject(objectOrGroup); - } - -}; - -/** -* Check whether this tilemap collides with the given game object. -* @param {GameObject} object - Target object you want to check. -* @return {boolean} Return true if this collides with given object, otherwise return false. -*/ -Phaser.Tilemap.prototype.collideGameObject = function (object) { - - if (object instanceof Phaser.Group || object instanceof Phaser.Tilemap) - { - return false; - } - - if (object.exists && object.body.allowCollision.none == false) - { - this._tempCollisionData = this.collisionLayer.getTileOverlaps(object); - - if (this.collisionCallback && this._tempCollisionData.length > 0) - { - this.collisionCallback.call(this.collisionCallbackContext, object, this._tempCollisionData); - } - - return true; - } - else - { - return false; - } - -}; - -/** -* Set a tile to a specific layer. -* @param {number} x - X position of this tile. -* @param {number} y - Y position of this tile. -* @param {number} index - The index of this tile type in the core map data. -* @param {number} [layer] - Which layer you want to set the tile to. -*/ -Phaser.Tilemap.prototype.putTile = function (x, y, index, layer) { - - if (typeof layer === "undefined") { layer = this.currentLayer.ID; } - - this.layers[layer].putTile(x, y, index); - -}; - -/** -* Calls the renderer. -*/ -Phaser.Tilemap.prototype.update = function () { - - this.renderer.render(this); - - if (this.fixedToCamera) - { - // this.displayObject.position.x = this.game.camera.view.x + this.x; - // this.displayObject.position.y = this.game.camera.view.y + this.y; - this.position.x = this.game.camera.view.x + 0; - this.position.y = this.game.camera.view.y + 0; - } - -}; - -/** -* Description. -*/ -Phaser.Tilemap.prototype.destroy = function () { - - this.tiles.length = 0; - this.layers.length = 0; - -}; - -/** -* Get width in pixels. -* @return {number} -*/ -Object.defineProperty(Phaser.Tilemap.prototype, "widthInPixels", { - - get: function () { - return this.currentLayer.widthInPixels; - } - -}); - -/** -* Get height in pixels. -* @return {number} -*/ -Object.defineProperty(Phaser.Tilemap.prototype, "heightInPixels", { - - get: function () { - return this.currentLayer.heightInPixels; - } - -}); diff --git a/src/tilemap/Tile.js b/src/tilemap_old/Tile.js similarity index 100% rename from src/tilemap/Tile.js rename to src/tilemap_old/Tile.js diff --git a/src/tilemap_old/Tilemap.js b/src/tilemap_old/Tilemap.js new file mode 100644 index 00000000..ad19fd81 --- /dev/null +++ b/src/tilemap_old/Tilemap.js @@ -0,0 +1,530 @@ +/** +* @author Richard Davey +* @copyright 2013 Photon Storm Ltd. +* @license https://github.com/photonstorm/phaser/blob/master/license.txt MIT License +* @module Phaser.Tilemap +*/ + + +/** +* Create a new Tilemap. +* @class Phaser.Tilemap +* @classdesc This GameObject allows for the display of a tilemap within the game world. Tile maps consist of an image, tile data and a size. +* Internally it creates a TilemapLayer for each layer in the tilemap. +* @constructor +* @param {Phaser.Game} game - Current game instance. +* @param {string} key - Asset key for this map. +* @param {object} x - Description. +* @param {object} y - Description. +* @param {boolean} resizeWorld - Resize the world bound automatically based on this tilemap? +* @param {number} tileWidth - Width of tiles in this map (used for CSV maps). +* @param {number} tileHeight - Height of tiles in this map (used for CSV maps). +*/ +Phaser.Tilemap = function (game, key, x, y, resizeWorld, tileWidth, tileHeight) { + + if (typeof resizeWorld === "undefined") { resizeWorld = true; } + if (typeof tileWidth === "undefined") { tileWidth = 0; } + if (typeof tileHeight === "undefined") { tileHeight = 0; } + + /** + * @property {Phaser.Game} game - A reference to the currently running game. + */ + this.game = game; + + /** + * @property {Description} group - Description. + */ + this.group = null; + + /** + * @property {string} name - The user defined name given to this Description. + * @default + */ + this.name = ''; + + /** + * @property {Description} key - Description. + */ + this.key = key; + + /** + * @property {number} renderOrderID - Render iteration counter + * @default + */ + this.renderOrderID = 0; + + /** + * @property {boolean} collisionCallback - Tilemap collision callback. + * @default + */ + this.collisionCallback = null; + + /** + * @property {boolean} exists - Description. + * @default + */ + this.exists = true; + + /** + * @property {boolean} visible - Description. + * @default + */ + this.visible = true; + + this.width = 0; + this.height = 0; + + /** + * @property {boolean} tiles - Description. + * @default + */ + this.tiles = []; + + /** + * @property {boolean} layers - Description. + * @default + */ + this.layers = []; + + var map = this.game.cache.getTilemap(key); + + PIXI.DisplayObjectContainer.call(this); + + /** + * @property {Description} position - Description. + */ + this.position.x = x; + this.position.y = y; + + /** + * @property {Description} type - Description. + */ + this.type = Phaser.TILEMAP; + + /** + * @property {Description} renderer - Description. + */ + this.renderer = new Phaser.TilemapRenderer(this.game); + + this.fixedToCamera = true; + + /** + * @property {Description} mapFormat - Description. + */ + this.mapFormat = map.format; + + switch (this.mapFormat) + { + case Phaser.Tilemap.CSV: + this.parseCSV(map.mapData, key, tileWidth, tileHeight); + break; + + case Phaser.Tilemap.JSON: + this.parseTiledJSON(map.mapData, key); + break; + } + + if (this.currentLayer && resizeWorld) + { + this.game.world.setBounds(0, 0, this.width, this.heightIn); + } + +}; + +// Needed to keep the PIXI.Sprite constructor in the prototype chain (as the core pixi renderer uses an instanceof check sadly) +Phaser.Tilemap.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); +Phaser.Tilemap.prototype.constructor = Phaser.Tilemap; + +Phaser.Tilemap.CSV = 0; +Phaser.Tilemap.JSON = 1; + +/** +* Parse csv map data and generate tiles. +* +* @method Phaser.Tilemap.prototype.parseCSV +* @param {string} data - CSV map data. +* @param {string} key - Asset key for tileset image. +* @param {number} tileWidth - Width of its tile. +* @param {number} tileHeight - Height of its tile. +*/ +Phaser.Tilemap.prototype.parseCSV = function (data, key, tileWidth, tileHeight) { + + var layer = new Phaser.TilemapLayer(this, 0, key, Phaser.Tilemap.CSV, 'TileLayerCSV' + this.layers.length.toString(), tileWidth, tileHeight); + + // Trim any rogue whitespace from the data + data = data.trim(); + + var rows = data.split("\n"); + + for (var i = 0; i < rows.length; i++) + { + var column = rows[i].split(","); + + if (column.length > 0) + { + layer.addColumn(column); + } + } + + layer.updateBounds(); + layer.createCanvas(); + + var tileQuantity = layer.parseTileOffsets(); + + this.currentLayer = layer; + this.collisionLayer = layer; + this.layers.push(layer); + + this.width = this.currentLayer.widthInPixels; + this.height = this.currentLayer.heightInPixels; + + this.generateTiles(tileQuantity); + +}; + +/** +* Parse JSON map data and generate tiles. +* +* @method Phaser.Tilemap.prototype.parseTiledJSON +* @param {string} data - JSON map data. +* @param {string} key - Asset key for tileset image. +*/ +Phaser.Tilemap.prototype.parseTiledJSON = function (json, key) { + + for (var i = 0; i < json.layers.length; i++) + { + var layer = new Phaser.TilemapLayer(this, i, key, Phaser.Tilemap.JSON, json.layers[i].name, json.tilewidth, json.tileheight); + + // Check it's a data layer + if (!json.layers[i].data) + { + continue; + } + + // layer.createQuadTree(json.tilewidth * json.layers[i].width, json.tileheight * json.layers[i].height); + + layer.alpha = json.layers[i].opacity; + layer.visible = json.layers[i].visible; + layer.tileMargin = json.tilesets[0].margin; + layer.tileSpacing = json.tilesets[0].spacing; + + var c = 0; + var row; + + for (var t = 0; t < json.layers[i].data.length; t++) + { + if (c == 0) + { + row = []; + } + + row.push(json.layers[i].data[t]); + c++; + + if (c == json.layers[i].width) + { + layer.addColumn(row); + c = 0; + } + } + + layer.updateBounds(); + layer.createCanvas(); + + var tileQuantity = layer.parseTileOffsets(); + + this.currentLayer = layer; + this.collisionLayer = layer; + this.layers.push(layer); + + if (this.currentLayer.widthInPixels > this.width) + { + this.width = this.currentLayer.widthInPixels; + } + + if (this.currentLayer.heightInPixels > this.height) + { + this.height = this.currentLayer.heightInPixels; + } + } + + this.generateTiles(tileQuantity); + +}; + +/** +* Create tiles of given quantity. +* @method Phaser.Tilemap.prototype.generateTiles +* @param {number} qty - Quantity of tiles to be generated. +*/ +Phaser.Tilemap.prototype.generateTiles = function (qty) { + + for (var i = 0; i < qty; i++) + { + this.tiles.push(new Phaser.Tile(this.game, this, i, this.currentLayer.tileWidth, this.currentLayer.tileHeight)); + } + +}; + +/** +* Set callback to be called when this tilemap collides. +* +* @method Phaser.Tilemap.prototype.setCollisionCallback +* @param {object} context - Callback will be called with this context. +* @param {Function} callback - Callback function. +*/ +Phaser.Tilemap.prototype.setCollisionCallback = function (context, callback) { + + this.collisionCallbackContext = context; + this.collisionCallback = callback; + +}; + +/** +* Set collision configs of tiles in a range index. +* +* @method Phaser.Tilemap.prototype.setCollisionRange +* @param {number} start - First index of tiles. +* @param {number} end - Last index of tiles. +* @param {number} collision - Bit field of flags. (see Tile.allowCollision) +* @param {boolean} resetCollisions - Reset collision flags before set. +* @param {boolean} separateX - Enable separate at x-axis. +* @param {boolean} separateY - Enable separate at y-axis. +*/ +Phaser.Tilemap.prototype.setCollisionRange = function (start, end, left, right, up, down, resetCollisions, separateX, separateY) { + + if (typeof resetCollisions === "undefined") { resetCollisions = false; } + if (typeof separateX === "undefined") { separateX = true; } + if (typeof separateY === "undefined") { separateY = true; } + + for (var i = start; i < end; i++) + { + this.tiles[i].setCollision(left, right, up, down, resetCollisions, separateX, separateY); + } + +}; + +/** +* Set collision configs of tiles with given index. +* @param {number[]} values - Index array which contains all tile indexes. The tiles with those indexes will be setup with rest parameters. +* @param {number} collision - Bit field of flags (see Tile.allowCollision). +* @param {boolean} resetCollisions - Reset collision flags before set. +* @param {boolean} left - Indicating collide with any object on the left. +* @param {boolean} right - Indicating collide with any object on the right. +* @param {boolean} up - Indicating collide with any object on the top. +* @param {boolean} down - Indicating collide with any object on the bottom. +* @param {boolean} separateX - Enable separate at x-axis. +* @param {boolean} separateY - Enable separate at y-axis. +*/ +Phaser.Tilemap.prototype.setCollisionByIndex = function (values, left, right, up, down, resetCollisions, separateX, separateY) { + + if (typeof resetCollisions === "undefined") { resetCollisions = false; } + if (typeof separateX === "undefined") { separateX = true; } + if (typeof separateY === "undefined") { separateY = true; } + + for (var i = 0; i < values.length; i++) + { + this.tiles[values[i]].setCollision(left, right, up, down, resetCollisions, separateX, separateY); + } + +}; + +// Tile Management + +/** +* Get the tile by its index. +* @param {number} value - Index of the tile you want to get. +* @return {Tile} The tile with given index. +*/ +Phaser.Tilemap.prototype.getTileByIndex = function (value) { + + if (this.tiles[value]) + { + return this.tiles[value]; + } + + return null; + +}; + +/** +* Get the tile located at specific position and layer. +* @param {number} x - X position of this tile located. +* @param {number} y - Y position of this tile located. +* @param {number} [layer] - layer of this tile located. +* @return {Tile} The tile with specific properties. +*/ +Phaser.Tilemap.prototype.getTile = function (x, y, layer) { + + if (typeof layer === "undefined") { layer = this.currentLayer.ID; } + + return this.tiles[this.layers[layer].getTileIndex(x, y)]; + +}; + +/** +* Get the tile located at specific position (in world coordinate) and layer (thus you give a position of a point which is within the tile). +* @param {number} x - X position of the point in target tile. +* @param {number} y - Y position of the point in target tile. +* @param {number} [layer] - layer of this tile located. +* @return {Tile} The tile with specific properties. +*/ +Phaser.Tilemap.prototype.getTileFromWorldXY = function (x, y, layer) { + + if (typeof layer === "undefined") { layer = this.currentLayer.ID; } + + return this.tiles[this.layers[layer].getTileFromWorldXY(x, y)]; + +}; + +/** +* Gets the tile underneath the Input.x/y position. +* @param {number} layer - The layer to check, defaults to 0. +* @return {Tile} +*/ +Phaser.Tilemap.prototype.getTileFromInputXY = function (layer) { + + if (typeof layer === "undefined") { layer = this.currentLayer.ID; } + + return this.tiles[this.layers[layer].getTileFromWorldXY(this.game.input.worldX, this.game.input.worldY)]; + +}; + +/** +* Get tiles overlaps the given object. +* @param {GameObject} object - Tiles you want to get that overlaps this. +* @return {array} Array with tiles information (Each contains x, y and the tile). +*/ +Phaser.Tilemap.prototype.getTileOverlaps = function (object) { + + return this.currentLayer.getTileOverlaps(object); + +}; + +// COLLIDE + +/** +* Check whether this tilemap collides with the given game object or group of objects. +* @param {Function} objectOrGroup - Target object of group you want to check. +* @param {Function} callback - This is called if objectOrGroup collides the tilemap. +* @param {object} context - Callback will be called with this context. +* @return {boolean} Return true if this collides with given object, otherwise return false. +*/ +Phaser.Tilemap.prototype.collide = function (objectOrGroup, callback, context) { + + objectOrGroup = objectOrGroup || this.game.world.group; + callback = callback || null; + context = context || null; + + if (callback && context) + { + this.collisionCallback = callback; + this.collisionCallbackContext = context; + } + + if (objectOrGroup instanceof Phaser.Group) + { + objectOrGroup.forEachAlive(this.collideGameObject, this); + } + else + { + this.collideGameObject(objectOrGroup); + } + +}; + +/** +* Check whether this tilemap collides with the given game object. +* @param {GameObject} object - Target object you want to check. +* @return {boolean} Return true if this collides with given object, otherwise return false. +*/ +Phaser.Tilemap.prototype.collideGameObject = function (object) { + + if (object instanceof Phaser.Group || object instanceof Phaser.Tilemap) + { + return false; + } + + if (object.exists && object.body.allowCollision.none == false) + { + this._tempCollisionData = this.collisionLayer.getTileOverlaps(object); + + if (this.collisionCallback && this._tempCollisionData.length > 0) + { + this.collisionCallback.call(this.collisionCallbackContext, object, this._tempCollisionData); + } + + return true; + } + else + { + return false; + } + +}; + +/** +* Set a tile to a specific layer. +* @param {number} x - X position of this tile. +* @param {number} y - Y position of this tile. +* @param {number} index - The index of this tile type in the core map data. +* @param {number} [layer] - Which layer you want to set the tile to. +*/ +Phaser.Tilemap.prototype.putTile = function (x, y, index, layer) { + + if (typeof layer === "undefined") { layer = this.currentLayer.ID; } + + this.layers[layer].putTile(x, y, index); + +}; + +/** +* Calls the renderer. +*/ +Phaser.Tilemap.prototype.update = function () { + + this.renderer.render(this); + + if (this.fixedToCamera) + { + // this.displayObject.position.x = this.game.camera.view.x + this.x; + // this.displayObject.position.y = this.game.camera.view.y + this.y; + this.position.x = this.game.camera.view.x + 0; + this.position.y = this.game.camera.view.y + 0; + } + +}; + +/** +* Description. +*/ +Phaser.Tilemap.prototype.destroy = function () { + + this.tiles.length = 0; + this.layers.length = 0; + +}; + +/** +* Get width in pixels. +* @return {number} +*/ +Object.defineProperty(Phaser.Tilemap.prototype, "widthInPixels", { + + get: function () { + return this.currentLayer.widthInPixels; + } + +}); + +/** +* Get height in pixels. +* @return {number} +*/ +Object.defineProperty(Phaser.Tilemap.prototype, "heightInPixels", { + + get: function () { + return this.currentLayer.heightInPixels; + } + +}); diff --git a/src/tilemap_old/TilemapLayer.js b/src/tilemap_old/TilemapLayer.js new file mode 100644 index 00000000..80fd7516 --- /dev/null +++ b/src/tilemap_old/TilemapLayer.js @@ -0,0 +1,662 @@ +/** +* @author Richard Davey +* @copyright 2013 Photon Storm Ltd. +* @license https://github.com/photonstorm/phaser/blob/master/license.txt MIT License +* @module Phaser.TilemapLayer +*/ + +/** +* Create a new TilemapLayer. +* @class Phaser.TilemapLayer +* @classdesc A Tilemap Layer. Tiled format maps can have multiple overlapping layers. +* @constructor +* @param parent {Tilemap} The tilemap that contains this layer. +* @param id {number} The ID of this layer within the Tilemap array. +* @param key {string} Asset key for this map. +* @param mapformat {number} Format of this map data, available: Tilemap.CSV or Tilemap.JSON. +* @param name {string} Name of this layer, so you can get this layer by its name. +* @param tileWidth {number} Width of tiles in this map. +* @param tileHeight {number} Height of tiles in this map. +*/ +Phaser.TilemapLayer = function (parent, id, key, mapFormat, name, tileWidth, tileHeight) { + + /** + * @property {boolean} exists - Controls whether update() and draw() are automatically called. + * @default + */ + this.exists = true; + + /** + * @property {boolean} visible - Controls whether draw() are automatically called. + * @default + */ + this.visible = true; + + /** + * How many tiles in each row. + * Read-only variable, do NOT recommend changing after the map is loaded! + * @property {number} widthInTiles + * @default + */ + this.widthInTiles = 0; + + /** + * How many tiles in each column. + * Read-only variable, do NOT recommend changing after the map is loaded! + * @property {number} heightInTiles + * @default + */ + this.heightInTiles = 0; + + /** + * Read-only variable, do NOT recommend changing after the map is loaded! + * @property {number} widthInPixels + * @default + */ + this.widthInPixels = 0; + + /** + * Read-only variable, do NOT recommend changing after the map is loaded! + * @property {number} heightInPixels + * @default + */ + this.heightInPixels = 0; + + /** + * Distance between REAL tiles to the tileset texture bound. + * @property {number} tileMargin + * @default + */ + this.tileMargin = 0; + + /** + * Distance between every 2 neighbor tile in the tileset texture. + * @property {number} tileSpacing + * @default + */ + this.tileSpacing = 0; + + /** + * @property {Description} parent - Description. + */ + this.parent = parent; + + /** + * @property {Phaser.Game} game - Description. + */ + this.game = parent.game; + + /** + * @property {Description} ID - Description. + */ + this.ID = id; + + /** + * @property {Description} name - Description. + */ + this.name = name; + + /** + * @property {Description} key - Description. + */ + this.key = key; + + /** + * @property {Description} type - Description. + */ + this.type = Phaser.TILEMAPLAYER; + + /** + * @property {tileWidth} mapFormat - Description. + */ + this.mapFormat = mapFormat; + + /** + * @property {Description} tileWidth - Description. + */ + this.tileWidth = tileWidth; + + /** + * @property {Description} tileHeight - Description. + */ + this.tileHeight = tileHeight; + + /** + * @property {Phaser.Rectangle} boundsInTiles - Description. + */ + this.boundsInTiles = new Phaser.Rectangle(); + + var map = this.game.cache.getTilemap(key); + + /** + * @property {Description} tileset - Description. + */ + this.tileset = map.data; + + /** + * @property {Description} _alpha - Description. + * @private + * @default + */ + this._alpha = 1; + + /** + * @property {Description} canvas - Description. + * @default + */ + this.canvas = null; + + /** + * @property {Description} context - Description. + * @default + */ + this.context = null; + + /** + * @property {Description} baseTexture - Description. + * @default + */ + this.baseTexture = null; + + /** + * @property {Description} texture - Description. + * @default + */ + this.texture = null; + + /** + * @property {Description} sprite - Description. + * @default + */ + this.sprite = null; + + /** + * @property {array} mapData - Description. + */ + this.mapData = []; + + /** + * @property {array} _tempTileBlock - Description. + * @private + */ + this._tempTileBlock = []; + + /** + * @property {array} _tempBlockResults - Description. + * @private + * + */ + this._tempBlockResults = []; + +}; + +Phaser.TilemapLayer.prototype = { + + /** + * Set a specific tile with its x and y in tiles. + * @method putTileWorldXY + * @param {number} x - X position of this tile in world coordinates. + * @param {number} y - Y position of this tile in world coordinates. + * @param {number} index - The index of this tile type in the core map data. + */ + putTileWorldXY: function (x, y, index) { + + x = this.game.math.snapToFloor(x, this.tileWidth) / this.tileWidth; + y = this.game.math.snapToFloor(y, this.tileHeight) / this.tileHeight; + + if (y >= 0 && y < this.mapData.length) + { + if (x >= 0 && x < this.mapData[y].length) + { + this.mapData[y][x] = index; + } + } + + }, + + /** + * Set a specific tile with its x and y in tiles. + * @method putTile + * @param {number} x - X position of this tile. + * @param {number} y - Y position of this tile. + * @param {number} index - The index of this tile type in the core map data. + */ + putTile: function (x, y, index) { + + if (y >= 0 && y < this.mapData.length) + { + if (x >= 0 && x < this.mapData[y].length) + { + this.mapData[y][x] = index; + } + } + + }, + + /** + * Swap tiles with 2 kinds of indexes. + * @method swapTile + * @param {number} tileA - First tile index. + * @param {number} tileB - Second tile index. + * @param {number} [x] - specify a Rectangle of tiles to operate. The x position in tiles of Rectangle's left-top corner. + * @param {number} [y] - specify a Rectangle of tiles to operate. The y position in tiles of Rectangle's left-top corner. + * @param {number} [width] - specify a Rectangle of tiles to operate. The width in tiles. + * @param {number} [height] - specify a Rectangle of tiles to operate. The height in tiles. + */ + swapTile: function (tileA, tileB, x, y, width, height) { + + x = x || 0; + y = y || 0; + width = width || this.widthInTiles; + height = height || this.heightInTiles; + + this.getTempBlock(x, y, width, height); + + for (var r = 0; r < this._tempTileBlock.length; r++) + { + // First sweep marking tileA as needing a new index + if (this._tempTileBlock[r].tile.index == tileA) + { + this._tempTileBlock[r].newIndex = true; + } + + // In the same pass we can swap tileB to tileA + if (this._tempTileBlock[r].tile.index == tileB) + { + this.mapData[this._tempTileBlock[r].y][this._tempTileBlock[r].x] = tileA; + } + } + + for (var r = 0; r < this._tempTileBlock.length; r++) + { + // And now swap our newIndex tiles for tileB + if (this._tempTileBlock[r].newIndex == true) + { + this.mapData[this._tempTileBlock[r].y][this._tempTileBlock[r].x] = tileB; + } + } + + }, + + /** + * Fill a tile block with a specific tile index. + * @method fillTile + * @param {number} index - Index of tiles you want to fill with. + * @param {number} [x] - X position (in tiles) of block's left-top corner. + * @param {number} [y] - Y position (in tiles) of block's left-top corner. + * @param {number} [width] - width of block. + * @param {number} [height] - height of block. + */ + fillTile: function (index, x, y, width, height) { + + x = x || 0; + y = y || 0; + width = width || this.widthInTiles; + height = height || this.heightInTiles; + + this.getTempBlock(x, y, width, height); + + for (var r = 0; r < this._tempTileBlock.length; r++) + { + this.mapData[this._tempTileBlock[r].y][this._tempTileBlock[r].x] = index; + } + + }, + + /** + * Set random tiles to a specific tile block. + * @method randomiseTiles + * @param {number[]} tiles - Tiles with indexes in this array will be randomly set to the given block. + * @param {number} [x] - X position (in tiles) of block's left-top corner. + * @param {number} [y] - Y position (in tiles) of block's left-top corner. + * @param {number} [width] - width of block. + * @param {number} [height] - height of block. + */ + randomiseTiles: function (tiles, x, y, width, height) { + + x = x || 0; + y = y || 0; + width = width || this.widthInTiles; + height = height || this.heightInTiles; + + this.getTempBlock(x, y, width, height); + + for (var r = 0; r < this._tempTileBlock.length; r++) + { + this.mapData[this._tempTileBlock[r].y][this._tempTileBlock[r].x] = this.game.math.getRandom(tiles); + } + + }, + + /** + * Replace one kind of tiles to another kind. + * @method replaceTile + * @param {number} tileA - First tile index. + * @param {number} tileB - Second tile index. + * @param {number} [x] - X position (in tiles) of block's left-top corner. + * @param {number} [y] - Y position (in tiles) of block's left-top corner. + * @param {number} [width] - width of block. + * @param {number} [height] - height of block. + */ + replaceTile: function (tileA, tileB, x, y, width, height) { + + x = x || 0; + y = y || 0; + width = width || this.widthInTiles; + height = height || this.heightInTiles; + + this.getTempBlock(x, y, width, height); + + for (var r = 0; r < this._tempTileBlock.length; r++) + { + if (this._tempTileBlock[r].tile.index == tileA) + { + this.mapData[this._tempTileBlock[r].y][this._tempTileBlock[r].x] = tileB; + } + } + + }, + + /** + * Get a tile block with specific position and size (both are in tiles). + * @method getTileBlock + * @param {number} [x] - X position (in tiles) of block's left-top corner. + * @param {number} [y] - Y position (in tiles) of block's left-top corner. + * @param {number} [width] - width of block. + * @param {number} [height] - height of block. + */ + getTileBlock: function (x, y, width, height) { + + var output = []; + + this.getTempBlock(x, y, width, height); + + for (var r = 0; r < this._tempTileBlock.length; r++) + { + output.push({ + x: this._tempTileBlock[r].x, + y: this._tempTileBlock[r].y, + tile: this._tempTileBlock[r].tile + }); + } + + return output; + + }, + + /** + * Get a tile with specific position (in world coordinate). (thus you give a position of a point which is within the tile) + * @method getTileFromWorldXY + * @param {number} [x] - X position (in tiles) of block's left-top corner. + * @param {number} [y] - Y position (in tiles) of block's left-top corner. + */ + getTileFromWorldXY: function (x, y) { + + x = Phaser.Math.snapToFloor(x, this.tileWidth) / this.tileWidth; + y = Phaser.Math.snapToFloor(y, this.tileHeight) / this.tileHeight; + + return this.getTileIndex(x, y); + + }, + + /** + * Get tiles overlaps the given object. + * @method getTileOverlaps + * @param {GameObject} object - Tiles you want to get that overlaps this. + * @return {array} Array with tiles informations (each contains x, y, and the tile). + */ + getTileOverlaps: function (object) { + + this._tempBlockResults.length = 0; + + // If the object is outside of the world coordinates then abort the check (tilemap has to exist within world bounds) + if (object.body.x < 0 || object.body.x > this.widthInPixels || object.body.y < 0 || object.body.bottom > this.heightInPixels) + { + return this._tempBlockResults; + } + + // What tiles do we need to check against? + this._tempTileX = this.game.math.snapToFloor(object.body.x, this.tileWidth) / this.tileWidth; + this._tempTileY = this.game.math.snapToFloor(object.body.y, this.tileHeight) / this.tileHeight; + this._tempTileW = (this.game.math.snapToCeil(object.body.width, this.tileWidth) + this.tileWidth) / this.tileWidth; + this._tempTileH = (this.game.math.snapToCeil(object.body.height, this.tileHeight) + this.tileHeight) / this.tileHeight; + + // Loop through the tiles we've got and check overlaps accordingly (the results are stored in this._tempTileBlock) + this.getTempBlock(this._tempTileX, this._tempTileY, this._tempTileW, this._tempTileH, true); + + for (var r = 0; r < this._tempTileBlock.length; r++) + { + // separateTile: function (object, x, y, width, height, mass, collideLeft, collideRight, collideUp, collideDown, separateX, separateY) + if (this.game.physics.separateTile(object, this._tempTileBlock[r].x * this.tileWidth, this._tempTileBlock[r].y * this.tileHeight, this.tileWidth, this.tileHeight, this._tempTileBlock[r].tile.mass, this._tempTileBlock[r].tile.collideLeft, this._tempTileBlock[r].tile.collideRight, this._tempTileBlock[r].tile.collideUp, this._tempTileBlock[r].tile.collideDown, this._tempTileBlock[r].tile.separateX, this._tempTileBlock[r].tile.separateY)) + { + this._tempBlockResults.push({ x: this._tempTileBlock[r].x, y: this._tempTileBlock[r].y, tile: this._tempTileBlock[r].tile }); + } + } + + return this._tempBlockResults; + + }, + + /** + * Get a tile block with its position and size (this method does not return, it'll set result to _tempTileBlock). + * @method getTempBlock + * @param {number} [x] - X position (in tiles) of block's left-top corner. + * @param {number} [y] - Y position (in tiles) of block's left-top corner. + * @param {number} [width] - width of block. + * @param {number} [height] - height of block. + * @param {boolean} collisionOnly - Whethor or not ONLY return tiles which will collide (its allowCollisions value is not Collision.NONE). + */ + getTempBlock: function (x, y, width, height, collisionOnly) { + + if (typeof collisionOnly === "undefined") { collisionOnly = false; } + + if (x < 0) + { + x = 0; + } + + if (y < 0) + { + y = 0; + } + + if (width > this.widthInTiles) + { + width = this.widthInTiles; + } + + if (height > this.heightInTiles) + { + height = this.heightInTiles; + } + + this._tempTileBlock = []; + + for (var ty = y; ty < y + height; ty++) + { + for (var tx = x; tx < x + width; tx++) + { + if (collisionOnly) + { + // We only want to consider the tile for checking if you can actually collide with it + if (this.mapData[ty] && this.mapData[ty][tx] && this.parent.tiles[this.mapData[ty][tx]].collideNone == false) + { + this._tempTileBlock.push({ + x: tx, + y: ty, + tile: this.parent.tiles[this.mapData[ty][tx]] + }); + } + } + else + { + if (this.mapData[ty] && this.mapData[ty][tx]) + { + this._tempTileBlock.push({ + x: tx, + y: ty, + tile: this.parent.tiles[this.mapData[ty][tx]] + }); + } + } + } + } + }, + + /** + * Get the tile index of specific position (in tiles). + * @method getTileIndex + * @param {number} x - X position of the tile. + * @param {number} y - Y position of the tile. + * @return {number} Index of the tile at that position. Return null if there isn't a tile there. + */ + getTileIndex: function (x, y) { + + if (y >= 0 && y < this.mapData.length) + { + if (x >= 0 && x < this.mapData[y].length) + { + return this.mapData[y][x]; + } + } + + return null; + + }, + + /** + * Add a column of tiles into the layer. + * @method addColumn + * @param {string[]|number[]} column - An array of tile indexes to be added. + */ + addColumn: function (column) { + + var data = []; + + for (var c = 0; c < column.length; c++) + { + data[c] = parseInt(column[c]); + } + + if (this.widthInTiles == 0) + { + this.widthInTiles = data.length; + this.widthInPixels = this.widthInTiles * this.tileWidth; + } + + this.mapData.push(data); + + this.heightInTiles++; + this.heightInPixels += this.tileHeight; + + }, + + /** + * Description. + * @method createCanvas + */ + createCanvas: function () { + + var width = this.game.width; + var height = this.game.height; + + if (this.widthInPixels < width) + { + width = this.widthInPixels; + } + + if (this.heightInPixels < height) + { + height = this.heightInPixels; + } + + this.canvas = Phaser.Canvas.create(width, height); + this.context = this.canvas.getContext('2d'); + + this.baseTexture = new PIXI.BaseTexture(this.canvas); + this.texture = new PIXI.Texture(this.baseTexture); + this.sprite = new PIXI.Sprite(this.texture); + + this.parent.addChild(this.sprite); + + }, + + createQuadTree: function (width, height) { + + this.quadTree = new Phaser.QuadTree(this, 0, 0, width, height, 20, 4); + + }, + + /** + * Update boundsInTiles with widthInTiles and heightInTiles. + * @method updateBounds + */ + updateBounds: function () { + + this.boundsInTiles.setTo(0, 0, this.widthInTiles, this.heightInTiles); + + }, + + /** + * Parse tile offsets from map data. + * Basically this creates a large array of objects that contain the x/y coordinates to grab each tile from + * for the entire map. Yes we could calculate this at run-time by using the tile index and some math, but we're + * trading a quite small bit of memory here to not have to process that in our main render loop. + * @method parseTileOffsets + * @return {number} Length of tileOffsets array. + */ + parseTileOffsets: function () { + + this.tileOffsets = []; + + var i = 0; + + if (this.mapFormat == Phaser.Tilemap.JSON) + { + // For some reason Tiled counts from 1 not 0 + this.tileOffsets[0] = null; + i = 1; + } + + for (var ty = this.tileMargin; ty < this.tileset.height; ty += (this.tileHeight + this.tileSpacing)) + { + for (var tx = this.tileMargin; tx < this.tileset.width; tx += (this.tileWidth + this.tileSpacing)) + { + this.tileOffsets[i] = { + x: tx, + y: ty + }; + i++; + } + } + + return this.tileOffsets.length; + + } + +}; + +/** +* Get +* @return {Description} +*//** +* Set +* @param {Description} value - Description. +*/ +Object.defineProperty(Phaser.TilemapLayer.prototype, 'alpha', { + + get: function() { + return this._alpha; + }, + + set: function(value) { + + if (this.sprite) + { + this.sprite.alpha = value; + } + + this._alpha = value; + } + +}); diff --git a/src/tilemap/TilemapRenderer.js b/src/tilemap_old/TilemapRenderer.js similarity index 100% rename from src/tilemap/TilemapRenderer.js rename to src/tilemap_old/TilemapRenderer.js