Better support for Retina Displays.

endel · Feb 7, 2013 · 7a48767 · 7a48767
1 parent b64a872
commit 7a48767
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 11 deletions.
diff --git a/README.md b/README.md
@@ -13,6 +13,7 @@ A Joyful 2D HTML5 Game Engine, designed to be easy to use.
   - Scene graph
   - Audio (provided by [howler.js](https://github.com/goldfire/howler.js))
   - Tweens (provided by [tween.js](https://github.com/sole/tween.js))
+  - Device feature detection
 
 ## TODO
 
@@ -21,8 +22,8 @@ A Joyful 2D HTML5 Game Engine, designed to be easy to use.
 
 ## Resources
 
-  - [Documentation](http://joyjs.org/docs)
   - [Examples](http://joyjs.org/examples.html)
+  - [API](http://joyjs.org/docs)
   - [Google Group](https://groups.google.com/forum/#!forum/joyjs)
   - Follow [@joyjs_](https://twitter.com/joyjs_) on twitter for updates
 

diff --git a/dist/joy.js b/dist/joy.js
@@ -4,7 +4,7 @@
  * 
  * @copyright 2012-2013 Endel Dreyer 
  * @license MIT
- * @build 2/4/2013
+ * @build 2/7/2013
  */
 
 (function(global) {
@@ -150,8 +150,28 @@
    * @class Support
    */
   J.Support = {
-    'imageSmoothingEnabled' : prefix("imageSmoothingEnabled"),
-    touch: ('ontouchstart' in window)
+    /**
+     * Device supports touch events?
+     * @attribute touch
+     * @type {Boolean}
+     * @static
+     * @readonly
+     */
+    touch: ('ontouchstart' in window),
+
+    /**
+     * Device supports Retina Display?
+     * @attribute retina
+     * @type {Boolean}
+     * @static
+     * @readonly
+     */
+    retina: window.devicePixelRatio > 1 || window.matchMedia('(min-resolution: 1.1dppx)').matches,
+
+    /*
+     * Misc / Interal use
+     */
+    'imageSmoothingEnabled' : prefix("imageSmoothingEnabled")
   };
 
   /**
@@ -163,7 +183,7 @@
       window.mozRequestAnimationFrame    ||
       window.oRequestAnimationFrame      ||
       window.msRequestAnimationFrame     ||
-      function( callback ) { window.setTimeout(callback, 1000 / 60); };		// TODO: use FPS rate from render module
+      function( callback ) { window.setTimeout(callback, 1000 / 60); }; // TODO: use FPS rate from render module
   })();
 })(Joy);
 
@@ -3961,6 +3981,12 @@ TWEEN.Interpolation = {
       this.context.canvas.height = options.height;
     }
 
+    // Resize canvas accourding to device pixel ratio
+    // 1 on Desktops
+    // 2 on Retina Display
+    this.context.canvas.style.width = (this.context.canvas.width / window.devicePixelRatio) + "px";
+    this.context.canvas.style.height = (this.context.canvas.height / window.devicePixelRatio) + "px";
+
     // TODO: Implement on-init engine trigger
     // Enable mouse events, if module is included
     if (typeof(J.Mouse) !== "undefined") {

diff --git a/dist/joy.min.js b/dist/joy.min.js
diff --git a/lib/core/engine.js b/lib/core/engine.js
@@ -48,6 +48,12 @@
       this.context.canvas.height = options.height;
     }
 
+    // Resize canvas accourding to device pixel ratio
+    // 1 on Desktops
+    // 2 on Retina Display
+    this.context.canvas.style.width = (this.context.canvas.width / window.devicePixelRatio) + "px";
+    this.context.canvas.style.height = (this.context.canvas.height / window.devicePixelRatio) + "px";
+
     // TODO: Implement on-init engine trigger
     // Enable mouse events, if module is included
     if (typeof(J.Mouse) !== "undefined") {

diff --git a/lib/support.js b/lib/support.js
@@ -20,8 +20,28 @@
    * @class Support
    */
   J.Support = {
-    'imageSmoothingEnabled' : prefix("imageSmoothingEnabled"),
-    touch: ('ontouchstart' in window)
+    /**
+     * Device supports touch events?
+     * @attribute touch
+     * @type {Boolean}
+     * @static
+     * @readonly
+     */
+    touch: ('ontouchstart' in window),
+
+    /**
+     * Device supports Retina Display?
+     * @attribute retina
+     * @type {Boolean}
+     * @static
+     * @readonly
+     */
+    retina: window.devicePixelRatio > 1 || window.matchMedia('(min-resolution: 1.1dppx)').matches,
+
+    /*
+     * Misc / Interal use
+     */
+    'imageSmoothingEnabled' : prefix("imageSmoothingEnabled")
   };
 
   /**
@@ -33,6 +53,6 @@
       window.mozRequestAnimationFrame    ||
       window.oRequestAnimationFrame      ||
       window.msRequestAnimationFrame     ||
-      function( callback ) { window.setTimeout(callback, 1000 / 60); };		// TODO: use FPS rate from render module
+      function( callback ) { window.setTimeout(callback, 1000 / 60); }; // TODO: use FPS rate from render module
   })();
 })(Joy);