diff --git a/README.md b/README.md index edc54ab..2243ce5 100644 --- a/README.md +++ b/README.md @@ -1,11 +1,10 @@ Pixi.js — A 2D JavaScript Renderer ============= -![pixi.js logo](http://www.goodboydigital.com/pixijs/pixi_v3_github-pad.png) +![pixi.js logo](http://www.goodboydigital.com/pixijs/pixiV4_wide_full.jpg) -[![projects](http://www.pixijs.com/wp-content/uploads/2013/05/headerPanel_projects-898x342.jpg)](http://www.pixijs.com/projects/) -## Pixi.js ## + [![Inline docs](http://inch-ci.org/github/GoodBoyDigital/pixi.js.svg?branch=dev)](http://inch-ci.org/github/GoodBoyDigital/pixi.js) [![Build Status](https://travis-ci.org/pixijs/pixi.js.svg?branch=dev)](https://travis-ci.org/pixijs/pixi.js) @@ -14,27 +13,6 @@ across all devices. The Pixi renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL. Also, it's fast. Really fast. -###Unlock the power of your creativity with Pixi.js and focalize your attention to build richer content in HTML5 and plain Javascript - -Are you a dreamer, a designer, an artist or just an ordinary person? Would you like to build an amazing game? Are you confortable with Javascript? If your answer is *yes*, you are in the right place! - -![Creativity](Pixi_mini.jpg) - -Pixi.js comes with a solid and easy to use [API](http://pixijs.github.io/docs). One of its key features is how it simplifies the use of WebGL, masking its complexity and allowing you to spend more time creating amazing things with **less code**. With Pixi.js you won't have to struggle with the OpenGL's shading language, Matrix computation and Vertex buffers. - -You still don't believe it? Look at the WebGL's [prerequisites](https://www.khronos.org/webgl/wiki/Getting_Started): - -> WebGL is a low-level API, so it's not for the faint of heart. OpenGL's shading language, GLSL, is itself an entire programming environment. As a result, even simple things in WebGL take quite a bit of code. You have to load, compile, and link shaders, set up the variables to be passed in to the shaders, and also perform matrix math to animate shapes. Basic areas you'll need to be familiar with include: - -> * GLSL, the shading language used by OpenGL and WebGL -* Matrix computation to set up transformations -* Vertex buffers to hold data about vertex positions, normals, colors, and textures (?) - -Use Pixi.js on your next project, all the benefits of WebGL with none of the hassle! - -###Build the next must-have cross platform app with Pixi.js - - If you want to keep up to date with the latest pixi.js news then feel free to follow us on twitter ([@doormat23](https://twitter.com/doormat23), and [@rolnaaba](https://twitter.com/rolnaaba)) and we will keep you posted! You can also check back on [our site](http://www.goodboydigital.com/blog) @@ -42,6 +20,16 @@ **Your support helps us make Pixi.js even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** +[![projects](http://www.pixijs.com/wp-content/uploads/2013/05/headerPanel_projects-898x342.jpg)](http://www.pixijs.com/projects/) + +### What to Use Pixi.js for and When to Use It + +Pixi.js is a rendering library that will allow you to create rich, interactive graphics, cross platform applications, and games without having to dive into the WebGL API or deal with browser and device compatibility. + +Pixi.js has full [WebGL](https://en.wikipedia.org/wiki/WebGL) support and seamlessly falls back to HTML5's [canvas](https://en.wikipedia.org/wiki/Canvas_element) if needed. As a framework, Pixi.js is a fantastic tool for authoring interactive content, *especially with the move away from Adobe Flash in recent years*. Use it for your graphics rich, interactive websites, applications, and HTML5 games. Out of the box cross-platform compatibility and graceful degredation mean you have less work to do and have more fun doing it! If you want to create polished and refined experiences relatively quickly, without delving into dense, low level code, all while avoiding the headaches of browser inconsistencies, then sprinkle your next project with some Pixi.js magic! + +**Boost your development and feel free to use your imagination!** + ### Demos ### - [WebGL Filters!](http://www.goodboydigital.com/pixijs/examples/15/indexAll.html) diff --git a/README.md b/README.md index edc54ab..2243ce5 100644 --- a/README.md +++ b/README.md @@ -1,11 +1,10 @@ Pixi.js — A 2D JavaScript Renderer ============= -![pixi.js logo](http://www.goodboydigital.com/pixijs/pixi_v3_github-pad.png) +![pixi.js logo](http://www.goodboydigital.com/pixijs/pixiV4_wide_full.jpg) -[![projects](http://www.pixijs.com/wp-content/uploads/2013/05/headerPanel_projects-898x342.jpg)](http://www.pixijs.com/projects/) -## Pixi.js ## + [![Inline docs](http://inch-ci.org/github/GoodBoyDigital/pixi.js.svg?branch=dev)](http://inch-ci.org/github/GoodBoyDigital/pixi.js) [![Build Status](https://travis-ci.org/pixijs/pixi.js.svg?branch=dev)](https://travis-ci.org/pixijs/pixi.js) @@ -14,27 +13,6 @@ across all devices. The Pixi renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL. Also, it's fast. Really fast. -###Unlock the power of your creativity with Pixi.js and focalize your attention to build richer content in HTML5 and plain Javascript - -Are you a dreamer, a designer, an artist or just an ordinary person? Would you like to build an amazing game? Are you confortable with Javascript? If your answer is *yes*, you are in the right place! - -![Creativity](Pixi_mini.jpg) - -Pixi.js comes with a solid and easy to use [API](http://pixijs.github.io/docs). One of its key features is how it simplifies the use of WebGL, masking its complexity and allowing you to spend more time creating amazing things with **less code**. With Pixi.js you won't have to struggle with the OpenGL's shading language, Matrix computation and Vertex buffers. - -You still don't believe it? Look at the WebGL's [prerequisites](https://www.khronos.org/webgl/wiki/Getting_Started): - -> WebGL is a low-level API, so it's not for the faint of heart. OpenGL's shading language, GLSL, is itself an entire programming environment. As a result, even simple things in WebGL take quite a bit of code. You have to load, compile, and link shaders, set up the variables to be passed in to the shaders, and also perform matrix math to animate shapes. Basic areas you'll need to be familiar with include: - -> * GLSL, the shading language used by OpenGL and WebGL -* Matrix computation to set up transformations -* Vertex buffers to hold data about vertex positions, normals, colors, and textures (?) - -Use Pixi.js on your next project, all the benefits of WebGL with none of the hassle! - -###Build the next must-have cross platform app with Pixi.js - - If you want to keep up to date with the latest pixi.js news then feel free to follow us on twitter ([@doormat23](https://twitter.com/doormat23), and [@rolnaaba](https://twitter.com/rolnaaba)) and we will keep you posted! You can also check back on [our site](http://www.goodboydigital.com/blog) @@ -42,6 +20,16 @@ **Your support helps us make Pixi.js even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** +[![projects](http://www.pixijs.com/wp-content/uploads/2013/05/headerPanel_projects-898x342.jpg)](http://www.pixijs.com/projects/) + +### What to Use Pixi.js for and When to Use It + +Pixi.js is a rendering library that will allow you to create rich, interactive graphics, cross platform applications, and games without having to dive into the WebGL API or deal with browser and device compatibility. + +Pixi.js has full [WebGL](https://en.wikipedia.org/wiki/WebGL) support and seamlessly falls back to HTML5's [canvas](https://en.wikipedia.org/wiki/Canvas_element) if needed. As a framework, Pixi.js is a fantastic tool for authoring interactive content, *especially with the move away from Adobe Flash in recent years*. Use it for your graphics rich, interactive websites, applications, and HTML5 games. Out of the box cross-platform compatibility and graceful degredation mean you have less work to do and have more fun doing it! If you want to create polished and refined experiences relatively quickly, without delving into dense, low level code, all while avoiding the headaches of browser inconsistencies, then sprinkle your next project with some Pixi.js magic! + +**Boost your development and feel free to use your imagination!** + ### Demos ### - [WebGL Filters!](http://www.goodboydigital.com/pixijs/examples/15/indexAll.html) diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index aa61db4..f18c736 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -728,8 +728,8 @@ this._spriteRect.worldAlpha = this.worldAlpha; - Graphics._SPRITE_TEXTURE.crop.width = rect.width; - Graphics._SPRITE_TEXTURE.crop.height = rect.height; + Graphics._SPRITE_TEXTURE.frame.width = rect.width; + Graphics._SPRITE_TEXTURE.frame.height = rect.height; this._spriteRect.transform.worldTransform = this.transform.worldTransform; @@ -981,7 +981,7 @@ /** * Draws the given shape to this Graphics object. Can be any of Circle, Rectangle, Ellipse, Line or Polygon. * - * @param shape {PIXI.Circle|PIXI.Rectangle|PIXI.Ellipse|PIXI.Line|PIXI.Polygon} The shape object to draw. + * @param shape {PIXI.Circle|PIXI.Ellipse|PIXI.Polygon|PIXI.Rectangle|PIXI.RoundedRectangle} The shape object to draw. * @return {PIXI.GraphicsData} The generated GraphicsData object. */ Graphics.prototype.drawShape = function (shape) diff --git a/README.md b/README.md index edc54ab..2243ce5 100644 --- a/README.md +++ b/README.md @@ -1,11 +1,10 @@ Pixi.js — A 2D JavaScript Renderer ============= -![pixi.js logo](http://www.goodboydigital.com/pixijs/pixi_v3_github-pad.png) +![pixi.js logo](http://www.goodboydigital.com/pixijs/pixiV4_wide_full.jpg) -[![projects](http://www.pixijs.com/wp-content/uploads/2013/05/headerPanel_projects-898x342.jpg)](http://www.pixijs.com/projects/) -## Pixi.js ## + [![Inline docs](http://inch-ci.org/github/GoodBoyDigital/pixi.js.svg?branch=dev)](http://inch-ci.org/github/GoodBoyDigital/pixi.js) [![Build Status](https://travis-ci.org/pixijs/pixi.js.svg?branch=dev)](https://travis-ci.org/pixijs/pixi.js) @@ -14,27 +13,6 @@ across all devices. The Pixi renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL. Also, it's fast. Really fast. -###Unlock the power of your creativity with Pixi.js and focalize your attention to build richer content in HTML5 and plain Javascript - -Are you a dreamer, a designer, an artist or just an ordinary person? Would you like to build an amazing game? Are you confortable with Javascript? If your answer is *yes*, you are in the right place! - -![Creativity](Pixi_mini.jpg) - -Pixi.js comes with a solid and easy to use [API](http://pixijs.github.io/docs). One of its key features is how it simplifies the use of WebGL, masking its complexity and allowing you to spend more time creating amazing things with **less code**. With Pixi.js you won't have to struggle with the OpenGL's shading language, Matrix computation and Vertex buffers. - -You still don't believe it? Look at the WebGL's [prerequisites](https://www.khronos.org/webgl/wiki/Getting_Started): - -> WebGL is a low-level API, so it's not for the faint of heart. OpenGL's shading language, GLSL, is itself an entire programming environment. As a result, even simple things in WebGL take quite a bit of code. You have to load, compile, and link shaders, set up the variables to be passed in to the shaders, and also perform matrix math to animate shapes. Basic areas you'll need to be familiar with include: - -> * GLSL, the shading language used by OpenGL and WebGL -* Matrix computation to set up transformations -* Vertex buffers to hold data about vertex positions, normals, colors, and textures (?) - -Use Pixi.js on your next project, all the benefits of WebGL with none of the hassle! - -###Build the next must-have cross platform app with Pixi.js - - If you want to keep up to date with the latest pixi.js news then feel free to follow us on twitter ([@doormat23](https://twitter.com/doormat23), and [@rolnaaba](https://twitter.com/rolnaaba)) and we will keep you posted! You can also check back on [our site](http://www.goodboydigital.com/blog) @@ -42,6 +20,16 @@ **Your support helps us make Pixi.js even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** +[![projects](http://www.pixijs.com/wp-content/uploads/2013/05/headerPanel_projects-898x342.jpg)](http://www.pixijs.com/projects/) + +### What to Use Pixi.js for and When to Use It + +Pixi.js is a rendering library that will allow you to create rich, interactive graphics, cross platform applications, and games without having to dive into the WebGL API or deal with browser and device compatibility. + +Pixi.js has full [WebGL](https://en.wikipedia.org/wiki/WebGL) support and seamlessly falls back to HTML5's [canvas](https://en.wikipedia.org/wiki/Canvas_element) if needed. As a framework, Pixi.js is a fantastic tool for authoring interactive content, *especially with the move away from Adobe Flash in recent years*. Use it for your graphics rich, interactive websites, applications, and HTML5 games. Out of the box cross-platform compatibility and graceful degredation mean you have less work to do and have more fun doing it! If you want to create polished and refined experiences relatively quickly, without delving into dense, low level code, all while avoiding the headaches of browser inconsistencies, then sprinkle your next project with some Pixi.js magic! + +**Boost your development and feel free to use your imagination!** + ### Demos ### - [WebGL Filters!](http://www.goodboydigital.com/pixijs/examples/15/indexAll.html) diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index aa61db4..f18c736 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -728,8 +728,8 @@ this._spriteRect.worldAlpha = this.worldAlpha; - Graphics._SPRITE_TEXTURE.crop.width = rect.width; - Graphics._SPRITE_TEXTURE.crop.height = rect.height; + Graphics._SPRITE_TEXTURE.frame.width = rect.width; + Graphics._SPRITE_TEXTURE.frame.height = rect.height; this._spriteRect.transform.worldTransform = this.transform.worldTransform; @@ -981,7 +981,7 @@ /** * Draws the given shape to this Graphics object. Can be any of Circle, Rectangle, Ellipse, Line or Polygon. * - * @param shape {PIXI.Circle|PIXI.Rectangle|PIXI.Ellipse|PIXI.Line|PIXI.Polygon} The shape object to draw. + * @param shape {PIXI.Circle|PIXI.Ellipse|PIXI.Polygon|PIXI.Rectangle|PIXI.RoundedRectangle} The shape object to draw. * @return {PIXI.GraphicsData} The generated GraphicsData object. */ Graphics.prototype.drawShape = function (shape) diff --git a/src/core/graphics/GraphicsData.js b/src/core/graphics/GraphicsData.js index 1d33508..bf9b044 100644 --- a/src/core/graphics/GraphicsData.js +++ b/src/core/graphics/GraphicsData.js @@ -52,7 +52,7 @@ this.fill = fill; /* - * @member {PIXI.Circle|PIXI.Rectangle|PIXI.Ellipse|PIXI.Line|PIXI.Polygon} The shape object to draw. + * @member {PIXI.Circle|PIXI.Ellipse|PIXI.Polygon|PIXI.Rectangle|PIXI.RoundedRectangle} The shape object to draw. */ this.shape = shape; diff --git a/README.md b/README.md index edc54ab..2243ce5 100644 --- a/README.md +++ b/README.md @@ -1,11 +1,10 @@ Pixi.js — A 2D JavaScript Renderer ============= -![pixi.js logo](http://www.goodboydigital.com/pixijs/pixi_v3_github-pad.png) +![pixi.js logo](http://www.goodboydigital.com/pixijs/pixiV4_wide_full.jpg) -[![projects](http://www.pixijs.com/wp-content/uploads/2013/05/headerPanel_projects-898x342.jpg)](http://www.pixijs.com/projects/) -## Pixi.js ## + [![Inline docs](http://inch-ci.org/github/GoodBoyDigital/pixi.js.svg?branch=dev)](http://inch-ci.org/github/GoodBoyDigital/pixi.js) [![Build Status](https://travis-ci.org/pixijs/pixi.js.svg?branch=dev)](https://travis-ci.org/pixijs/pixi.js) @@ -14,27 +13,6 @@ across all devices. The Pixi renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL. Also, it's fast. Really fast. -###Unlock the power of your creativity with Pixi.js and focalize your attention to build richer content in HTML5 and plain Javascript - -Are you a dreamer, a designer, an artist or just an ordinary person? Would you like to build an amazing game? Are you confortable with Javascript? If your answer is *yes*, you are in the right place! - -![Creativity](Pixi_mini.jpg) - -Pixi.js comes with a solid and easy to use [API](http://pixijs.github.io/docs). One of its key features is how it simplifies the use of WebGL, masking its complexity and allowing you to spend more time creating amazing things with **less code**. With Pixi.js you won't have to struggle with the OpenGL's shading language, Matrix computation and Vertex buffers. - -You still don't believe it? Look at the WebGL's [prerequisites](https://www.khronos.org/webgl/wiki/Getting_Started): - -> WebGL is a low-level API, so it's not for the faint of heart. OpenGL's shading language, GLSL, is itself an entire programming environment. As a result, even simple things in WebGL take quite a bit of code. You have to load, compile, and link shaders, set up the variables to be passed in to the shaders, and also perform matrix math to animate shapes. Basic areas you'll need to be familiar with include: - -> * GLSL, the shading language used by OpenGL and WebGL -* Matrix computation to set up transformations -* Vertex buffers to hold data about vertex positions, normals, colors, and textures (?) - -Use Pixi.js on your next project, all the benefits of WebGL with none of the hassle! - -###Build the next must-have cross platform app with Pixi.js - - If you want to keep up to date with the latest pixi.js news then feel free to follow us on twitter ([@doormat23](https://twitter.com/doormat23), and [@rolnaaba](https://twitter.com/rolnaaba)) and we will keep you posted! You can also check back on [our site](http://www.goodboydigital.com/blog) @@ -42,6 +20,16 @@ **Your support helps us make Pixi.js even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** +[![projects](http://www.pixijs.com/wp-content/uploads/2013/05/headerPanel_projects-898x342.jpg)](http://www.pixijs.com/projects/) + +### What to Use Pixi.js for and When to Use It + +Pixi.js is a rendering library that will allow you to create rich, interactive graphics, cross platform applications, and games without having to dive into the WebGL API or deal with browser and device compatibility. + +Pixi.js has full [WebGL](https://en.wikipedia.org/wiki/WebGL) support and seamlessly falls back to HTML5's [canvas](https://en.wikipedia.org/wiki/Canvas_element) if needed. As a framework, Pixi.js is a fantastic tool for authoring interactive content, *especially with the move away from Adobe Flash in recent years*. Use it for your graphics rich, interactive websites, applications, and HTML5 games. Out of the box cross-platform compatibility and graceful degredation mean you have less work to do and have more fun doing it! If you want to create polished and refined experiences relatively quickly, without delving into dense, low level code, all while avoiding the headaches of browser inconsistencies, then sprinkle your next project with some Pixi.js magic! + +**Boost your development and feel free to use your imagination!** + ### Demos ### - [WebGL Filters!](http://www.goodboydigital.com/pixijs/examples/15/indexAll.html) diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index aa61db4..f18c736 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -728,8 +728,8 @@ this._spriteRect.worldAlpha = this.worldAlpha; - Graphics._SPRITE_TEXTURE.crop.width = rect.width; - Graphics._SPRITE_TEXTURE.crop.height = rect.height; + Graphics._SPRITE_TEXTURE.frame.width = rect.width; + Graphics._SPRITE_TEXTURE.frame.height = rect.height; this._spriteRect.transform.worldTransform = this.transform.worldTransform; @@ -981,7 +981,7 @@ /** * Draws the given shape to this Graphics object. Can be any of Circle, Rectangle, Ellipse, Line or Polygon. * - * @param shape {PIXI.Circle|PIXI.Rectangle|PIXI.Ellipse|PIXI.Line|PIXI.Polygon} The shape object to draw. + * @param shape {PIXI.Circle|PIXI.Ellipse|PIXI.Polygon|PIXI.Rectangle|PIXI.RoundedRectangle} The shape object to draw. * @return {PIXI.GraphicsData} The generated GraphicsData object. */ Graphics.prototype.drawShape = function (shape) diff --git a/src/core/graphics/GraphicsData.js b/src/core/graphics/GraphicsData.js index 1d33508..bf9b044 100644 --- a/src/core/graphics/GraphicsData.js +++ b/src/core/graphics/GraphicsData.js @@ -52,7 +52,7 @@ this.fill = fill; /* - * @member {PIXI.Circle|PIXI.Rectangle|PIXI.Ellipse|PIXI.Line|PIXI.Polygon} The shape object to draw. + * @member {PIXI.Circle|PIXI.Ellipse|PIXI.Polygon|PIXI.Rectangle|PIXI.RoundedRectangle} The shape object to draw. */ this.shape = shape; diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index 96d52fd..f689c58 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -110,12 +110,12 @@ width: { get: function () { - return Math.abs(this.scale.x) * this.texture.crop.width; + return Math.abs(this.scale.x) * this.texture.orig.width; }, set: function (value) { var sign = utils.sign(this.scale.x) || 1; - this.scale.x = sign * value / this.texture.crop.width; + this.scale.x = sign * value / this.texture.orig.width; this._width = value; } }, @@ -129,12 +129,12 @@ height: { get: function () { - return Math.abs(this.scale.y) * this.texture.crop.height; + return Math.abs(this.scale.y) * this.texture.orig.height; }, set: function (value) { var sign = utils.sign(this.scale.y) || 1; - this.scale.y = sign * value / this.texture.crop.height; + this.scale.y = sign * value / this.texture.orig.height; this._height = value; } }, @@ -190,12 +190,12 @@ // so if _width is 0 then width was not set.. if (this._width) { - this.scale.x = utils.sign(this.scale.x) * this._width / this.texture.crop.width; + this.scale.x = utils.sign(this.scale.x) * this._width / this.texture.orig.width; } if (this._height) { - this.scale.y = utils.sign(this.scale.y) * this._height / this.texture.crop.height; + this.scale.y = utils.sign(this.scale.y) * this._height / this.texture.orig.height; } }; @@ -207,25 +207,25 @@ vertexData = this.vertexData, w0, w1, h0, h1, trim = texture.trim, - crop = texture.crop; + orig = texture.orig; if (trim) { // if the sprite is trimmed and is not a tilingsprite then we need to add the extra space before transforming the sprite coords.. - w1 = trim.x - this.anchor.x * crop.width; + w1 = trim.x - this.anchor.x * orig.width; w0 = w1 + trim.width; - h1 = trim.y - this.anchor.y * crop.height; + h1 = trim.y - this.anchor.y * orig.height; h0 = h1 + trim.height; } else { - w0 = (crop.width ) * (1-this.anchor.x); - w1 = (crop.width ) * -this.anchor.x; + w0 = (orig.width ) * (1-this.anchor.x); + w1 = (orig.width ) * -this.anchor.x; - h0 = crop.height * (1-this.anchor.y); - h1 = crop.height * -this.anchor.y; + h0 = orig.height * (1-this.anchor.y); + h1 = orig.height * -this.anchor.y; } // xy @@ -370,10 +370,10 @@ */ Sprite.prototype.getLocalBounds = function () { - this._bounds.x = -this._texture.crop.width * this.anchor.x; - this._bounds.y = -this._texture.crop.height * this.anchor.y; - this._bounds.width = this._texture.crop.width; - this._bounds.height = this._texture.crop.height; + this._bounds.x = -this._texture.orig.width * this.anchor.x; + this._bounds.y = -this._texture.orig.height * this.anchor.y; + this._bounds.width = this._texture.orig.width; + this._bounds.height = this._texture.orig.height; return this._bounds; }; @@ -387,8 +387,8 @@ { this.worldTransform.applyInverse(point, tempPoint); - var width = this._texture.crop.width; - var height = this._texture.crop.height; + var width = this._texture.orig.width; + var height = this._texture.orig.height; var x1 = -width * this.anchor.x; var y1; diff --git a/README.md b/README.md index edc54ab..2243ce5 100644 --- a/README.md +++ b/README.md @@ -1,11 +1,10 @@ Pixi.js — A 2D JavaScript Renderer ============= -![pixi.js logo](http://www.goodboydigital.com/pixijs/pixi_v3_github-pad.png) +![pixi.js logo](http://www.goodboydigital.com/pixijs/pixiV4_wide_full.jpg) -[![projects](http://www.pixijs.com/wp-content/uploads/2013/05/headerPanel_projects-898x342.jpg)](http://www.pixijs.com/projects/) -## Pixi.js ## + [![Inline docs](http://inch-ci.org/github/GoodBoyDigital/pixi.js.svg?branch=dev)](http://inch-ci.org/github/GoodBoyDigital/pixi.js) [![Build Status](https://travis-ci.org/pixijs/pixi.js.svg?branch=dev)](https://travis-ci.org/pixijs/pixi.js) @@ -14,27 +13,6 @@ across all devices. The Pixi renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL. Also, it's fast. Really fast. -###Unlock the power of your creativity with Pixi.js and focalize your attention to build richer content in HTML5 and plain Javascript - -Are you a dreamer, a designer, an artist or just an ordinary person? Would you like to build an amazing game? Are you confortable with Javascript? If your answer is *yes*, you are in the right place! - -![Creativity](Pixi_mini.jpg) - -Pixi.js comes with a solid and easy to use [API](http://pixijs.github.io/docs). One of its key features is how it simplifies the use of WebGL, masking its complexity and allowing you to spend more time creating amazing things with **less code**. With Pixi.js you won't have to struggle with the OpenGL's shading language, Matrix computation and Vertex buffers. - -You still don't believe it? Look at the WebGL's [prerequisites](https://www.khronos.org/webgl/wiki/Getting_Started): - -> WebGL is a low-level API, so it's not for the faint of heart. OpenGL's shading language, GLSL, is itself an entire programming environment. As a result, even simple things in WebGL take quite a bit of code. You have to load, compile, and link shaders, set up the variables to be passed in to the shaders, and also perform matrix math to animate shapes. Basic areas you'll need to be familiar with include: - -> * GLSL, the shading language used by OpenGL and WebGL -* Matrix computation to set up transformations -* Vertex buffers to hold data about vertex positions, normals, colors, and textures (?) - -Use Pixi.js on your next project, all the benefits of WebGL with none of the hassle! - -###Build the next must-have cross platform app with Pixi.js - - If you want to keep up to date with the latest pixi.js news then feel free to follow us on twitter ([@doormat23](https://twitter.com/doormat23), and [@rolnaaba](https://twitter.com/rolnaaba)) and we will keep you posted! You can also check back on [our site](http://www.goodboydigital.com/blog) @@ -42,6 +20,16 @@ **Your support helps us make Pixi.js even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** +[![projects](http://www.pixijs.com/wp-content/uploads/2013/05/headerPanel_projects-898x342.jpg)](http://www.pixijs.com/projects/) + +### What to Use Pixi.js for and When to Use It + +Pixi.js is a rendering library that will allow you to create rich, interactive graphics, cross platform applications, and games without having to dive into the WebGL API or deal with browser and device compatibility. + +Pixi.js has full [WebGL](https://en.wikipedia.org/wiki/WebGL) support and seamlessly falls back to HTML5's [canvas](https://en.wikipedia.org/wiki/Canvas_element) if needed. As a framework, Pixi.js is a fantastic tool for authoring interactive content, *especially with the move away from Adobe Flash in recent years*. Use it for your graphics rich, interactive websites, applications, and HTML5 games. Out of the box cross-platform compatibility and graceful degredation mean you have less work to do and have more fun doing it! If you want to create polished and refined experiences relatively quickly, without delving into dense, low level code, all while avoiding the headaches of browser inconsistencies, then sprinkle your next project with some Pixi.js magic! + +**Boost your development and feel free to use your imagination!** + ### Demos ### - [WebGL Filters!](http://www.goodboydigital.com/pixijs/examples/15/indexAll.html) diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index aa61db4..f18c736 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -728,8 +728,8 @@ this._spriteRect.worldAlpha = this.worldAlpha; - Graphics._SPRITE_TEXTURE.crop.width = rect.width; - Graphics._SPRITE_TEXTURE.crop.height = rect.height; + Graphics._SPRITE_TEXTURE.frame.width = rect.width; + Graphics._SPRITE_TEXTURE.frame.height = rect.height; this._spriteRect.transform.worldTransform = this.transform.worldTransform; @@ -981,7 +981,7 @@ /** * Draws the given shape to this Graphics object. Can be any of Circle, Rectangle, Ellipse, Line or Polygon. * - * @param shape {PIXI.Circle|PIXI.Rectangle|PIXI.Ellipse|PIXI.Line|PIXI.Polygon} The shape object to draw. + * @param shape {PIXI.Circle|PIXI.Ellipse|PIXI.Polygon|PIXI.Rectangle|PIXI.RoundedRectangle} The shape object to draw. * @return {PIXI.GraphicsData} The generated GraphicsData object. */ Graphics.prototype.drawShape = function (shape) diff --git a/src/core/graphics/GraphicsData.js b/src/core/graphics/GraphicsData.js index 1d33508..bf9b044 100644 --- a/src/core/graphics/GraphicsData.js +++ b/src/core/graphics/GraphicsData.js @@ -52,7 +52,7 @@ this.fill = fill; /* - * @member {PIXI.Circle|PIXI.Rectangle|PIXI.Ellipse|PIXI.Line|PIXI.Polygon} The shape object to draw. + * @member {PIXI.Circle|PIXI.Ellipse|PIXI.Polygon|PIXI.Rectangle|PIXI.RoundedRectangle} The shape object to draw. */ this.shape = shape; diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index 96d52fd..f689c58 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -110,12 +110,12 @@ width: { get: function () { - return Math.abs(this.scale.x) * this.texture.crop.width; + return Math.abs(this.scale.x) * this.texture.orig.width; }, set: function (value) { var sign = utils.sign(this.scale.x) || 1; - this.scale.x = sign * value / this.texture.crop.width; + this.scale.x = sign * value / this.texture.orig.width; this._width = value; } }, @@ -129,12 +129,12 @@ height: { get: function () { - return Math.abs(this.scale.y) * this.texture.crop.height; + return Math.abs(this.scale.y) * this.texture.orig.height; }, set: function (value) { var sign = utils.sign(this.scale.y) || 1; - this.scale.y = sign * value / this.texture.crop.height; + this.scale.y = sign * value / this.texture.orig.height; this._height = value; } }, @@ -190,12 +190,12 @@ // so if _width is 0 then width was not set.. if (this._width) { - this.scale.x = utils.sign(this.scale.x) * this._width / this.texture.crop.width; + this.scale.x = utils.sign(this.scale.x) * this._width / this.texture.orig.width; } if (this._height) { - this.scale.y = utils.sign(this.scale.y) * this._height / this.texture.crop.height; + this.scale.y = utils.sign(this.scale.y) * this._height / this.texture.orig.height; } }; @@ -207,25 +207,25 @@ vertexData = this.vertexData, w0, w1, h0, h1, trim = texture.trim, - crop = texture.crop; + orig = texture.orig; if (trim) { // if the sprite is trimmed and is not a tilingsprite then we need to add the extra space before transforming the sprite coords.. - w1 = trim.x - this.anchor.x * crop.width; + w1 = trim.x - this.anchor.x * orig.width; w0 = w1 + trim.width; - h1 = trim.y - this.anchor.y * crop.height; + h1 = trim.y - this.anchor.y * orig.height; h0 = h1 + trim.height; } else { - w0 = (crop.width ) * (1-this.anchor.x); - w1 = (crop.width ) * -this.anchor.x; + w0 = (orig.width ) * (1-this.anchor.x); + w1 = (orig.width ) * -this.anchor.x; - h0 = crop.height * (1-this.anchor.y); - h1 = crop.height * -this.anchor.y; + h0 = orig.height * (1-this.anchor.y); + h1 = orig.height * -this.anchor.y; } // xy @@ -370,10 +370,10 @@ */ Sprite.prototype.getLocalBounds = function () { - this._bounds.x = -this._texture.crop.width * this.anchor.x; - this._bounds.y = -this._texture.crop.height * this.anchor.y; - this._bounds.width = this._texture.crop.width; - this._bounds.height = this._texture.crop.height; + this._bounds.x = -this._texture.orig.width * this.anchor.x; + this._bounds.y = -this._texture.orig.height * this.anchor.y; + this._bounds.width = this._texture.orig.width; + this._bounds.height = this._texture.orig.height; return this._bounds; }; @@ -387,8 +387,8 @@ { this.worldTransform.applyInverse(point, tempPoint); - var width = this._texture.crop.width; - var height = this._texture.crop.height; + var width = this._texture.orig.width; + var height = this._texture.orig.height; var x1 = -width * this.anchor.x; var y1; diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index d95c745..17e5e7d 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -50,7 +50,7 @@ width = texture._frame.width, height = texture._frame.height; - if (texture.crop.width <= 0 || texture.crop.height <= 0) + if (texture.orig.width <= 0 || texture.orig.height <= 0) { return; } @@ -70,11 +70,11 @@ } if (texture.trim) { - dx = texture.trim.width/2 + texture.trim.x - sprite.anchor.x * texture.crop.width; - dy = texture.trim.height/2 + texture.trim.y - sprite.anchor.y * texture.crop.height; + dx = texture.trim.width/2 + texture.trim.x - sprite.anchor.x * texture.orig.width; + dy = texture.trim.height/2 + texture.trim.y - sprite.anchor.y * texture.orig.height; } else { - dx = (0.5 - sprite.anchor.x) * texture.crop.width; - dy = (0.5 - sprite.anchor.y) * texture.crop.height; + dx = (0.5 - sprite.anchor.x) * texture.orig.width; + dy = (0.5 - sprite.anchor.y) * texture.orig.height; } if(texture.rotate) { wt.copy(canvasRenderWorldTransform); diff --git a/README.md b/README.md index edc54ab..2243ce5 100644 --- a/README.md +++ b/README.md @@ -1,11 +1,10 @@ Pixi.js — A 2D JavaScript Renderer ============= -![pixi.js logo](http://www.goodboydigital.com/pixijs/pixi_v3_github-pad.png) +![pixi.js logo](http://www.goodboydigital.com/pixijs/pixiV4_wide_full.jpg) -[![projects](http://www.pixijs.com/wp-content/uploads/2013/05/headerPanel_projects-898x342.jpg)](http://www.pixijs.com/projects/) -## Pixi.js ## + [![Inline docs](http://inch-ci.org/github/GoodBoyDigital/pixi.js.svg?branch=dev)](http://inch-ci.org/github/GoodBoyDigital/pixi.js) [![Build Status](https://travis-ci.org/pixijs/pixi.js.svg?branch=dev)](https://travis-ci.org/pixijs/pixi.js) @@ -14,27 +13,6 @@ across all devices. The Pixi renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL. Also, it's fast. Really fast. -###Unlock the power of your creativity with Pixi.js and focalize your attention to build richer content in HTML5 and plain Javascript - -Are you a dreamer, a designer, an artist or just an ordinary person? Would you like to build an amazing game? Are you confortable with Javascript? If your answer is *yes*, you are in the right place! - -![Creativity](Pixi_mini.jpg) - -Pixi.js comes with a solid and easy to use [API](http://pixijs.github.io/docs). One of its key features is how it simplifies the use of WebGL, masking its complexity and allowing you to spend more time creating amazing things with **less code**. With Pixi.js you won't have to struggle with the OpenGL's shading language, Matrix computation and Vertex buffers. - -You still don't believe it? Look at the WebGL's [prerequisites](https://www.khronos.org/webgl/wiki/Getting_Started): - -> WebGL is a low-level API, so it's not for the faint of heart. OpenGL's shading language, GLSL, is itself an entire programming environment. As a result, even simple things in WebGL take quite a bit of code. You have to load, compile, and link shaders, set up the variables to be passed in to the shaders, and also perform matrix math to animate shapes. Basic areas you'll need to be familiar with include: - -> * GLSL, the shading language used by OpenGL and WebGL -* Matrix computation to set up transformations -* Vertex buffers to hold data about vertex positions, normals, colors, and textures (?) - -Use Pixi.js on your next project, all the benefits of WebGL with none of the hassle! - -###Build the next must-have cross platform app with Pixi.js - - If you want to keep up to date with the latest pixi.js news then feel free to follow us on twitter ([@doormat23](https://twitter.com/doormat23), and [@rolnaaba](https://twitter.com/rolnaaba)) and we will keep you posted! You can also check back on [our site](http://www.goodboydigital.com/blog) @@ -42,6 +20,16 @@ **Your support helps us make Pixi.js even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** +[![projects](http://www.pixijs.com/wp-content/uploads/2013/05/headerPanel_projects-898x342.jpg)](http://www.pixijs.com/projects/) + +### What to Use Pixi.js for and When to Use It + +Pixi.js is a rendering library that will allow you to create rich, interactive graphics, cross platform applications, and games without having to dive into the WebGL API or deal with browser and device compatibility. + +Pixi.js has full [WebGL](https://en.wikipedia.org/wiki/WebGL) support and seamlessly falls back to HTML5's [canvas](https://en.wikipedia.org/wiki/Canvas_element) if needed. As a framework, Pixi.js is a fantastic tool for authoring interactive content, *especially with the move away from Adobe Flash in recent years*. Use it for your graphics rich, interactive websites, applications, and HTML5 games. Out of the box cross-platform compatibility and graceful degredation mean you have less work to do and have more fun doing it! If you want to create polished and refined experiences relatively quickly, without delving into dense, low level code, all while avoiding the headaches of browser inconsistencies, then sprinkle your next project with some Pixi.js magic! + +**Boost your development and feel free to use your imagination!** + ### Demos ### - [WebGL Filters!](http://www.goodboydigital.com/pixijs/examples/15/indexAll.html) diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index aa61db4..f18c736 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -728,8 +728,8 @@ this._spriteRect.worldAlpha = this.worldAlpha; - Graphics._SPRITE_TEXTURE.crop.width = rect.width; - Graphics._SPRITE_TEXTURE.crop.height = rect.height; + Graphics._SPRITE_TEXTURE.frame.width = rect.width; + Graphics._SPRITE_TEXTURE.frame.height = rect.height; this._spriteRect.transform.worldTransform = this.transform.worldTransform; @@ -981,7 +981,7 @@ /** * Draws the given shape to this Graphics object. Can be any of Circle, Rectangle, Ellipse, Line or Polygon. * - * @param shape {PIXI.Circle|PIXI.Rectangle|PIXI.Ellipse|PIXI.Line|PIXI.Polygon} The shape object to draw. + * @param shape {PIXI.Circle|PIXI.Ellipse|PIXI.Polygon|PIXI.Rectangle|PIXI.RoundedRectangle} The shape object to draw. * @return {PIXI.GraphicsData} The generated GraphicsData object. */ Graphics.prototype.drawShape = function (shape) diff --git a/src/core/graphics/GraphicsData.js b/src/core/graphics/GraphicsData.js index 1d33508..bf9b044 100644 --- a/src/core/graphics/GraphicsData.js +++ b/src/core/graphics/GraphicsData.js @@ -52,7 +52,7 @@ this.fill = fill; /* - * @member {PIXI.Circle|PIXI.Rectangle|PIXI.Ellipse|PIXI.Line|PIXI.Polygon} The shape object to draw. + * @member {PIXI.Circle|PIXI.Ellipse|PIXI.Polygon|PIXI.Rectangle|PIXI.RoundedRectangle} The shape object to draw. */ this.shape = shape; diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index 96d52fd..f689c58 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -110,12 +110,12 @@ width: { get: function () { - return Math.abs(this.scale.x) * this.texture.crop.width; + return Math.abs(this.scale.x) * this.texture.orig.width; }, set: function (value) { var sign = utils.sign(this.scale.x) || 1; - this.scale.x = sign * value / this.texture.crop.width; + this.scale.x = sign * value / this.texture.orig.width; this._width = value; } }, @@ -129,12 +129,12 @@ height: { get: function () { - return Math.abs(this.scale.y) * this.texture.crop.height; + return Math.abs(this.scale.y) * this.texture.orig.height; }, set: function (value) { var sign = utils.sign(this.scale.y) || 1; - this.scale.y = sign * value / this.texture.crop.height; + this.scale.y = sign * value / this.texture.orig.height; this._height = value; } }, @@ -190,12 +190,12 @@ // so if _width is 0 then width was not set.. if (this._width) { - this.scale.x = utils.sign(this.scale.x) * this._width / this.texture.crop.width; + this.scale.x = utils.sign(this.scale.x) * this._width / this.texture.orig.width; } if (this._height) { - this.scale.y = utils.sign(this.scale.y) * this._height / this.texture.crop.height; + this.scale.y = utils.sign(this.scale.y) * this._height / this.texture.orig.height; } }; @@ -207,25 +207,25 @@ vertexData = this.vertexData, w0, w1, h0, h1, trim = texture.trim, - crop = texture.crop; + orig = texture.orig; if (trim) { // if the sprite is trimmed and is not a tilingsprite then we need to add the extra space before transforming the sprite coords.. - w1 = trim.x - this.anchor.x * crop.width; + w1 = trim.x - this.anchor.x * orig.width; w0 = w1 + trim.width; - h1 = trim.y - this.anchor.y * crop.height; + h1 = trim.y - this.anchor.y * orig.height; h0 = h1 + trim.height; } else { - w0 = (crop.width ) * (1-this.anchor.x); - w1 = (crop.width ) * -this.anchor.x; + w0 = (orig.width ) * (1-this.anchor.x); + w1 = (orig.width ) * -this.anchor.x; - h0 = crop.height * (1-this.anchor.y); - h1 = crop.height * -this.anchor.y; + h0 = orig.height * (1-this.anchor.y); + h1 = orig.height * -this.anchor.y; } // xy @@ -370,10 +370,10 @@ */ Sprite.prototype.getLocalBounds = function () { - this._bounds.x = -this._texture.crop.width * this.anchor.x; - this._bounds.y = -this._texture.crop.height * this.anchor.y; - this._bounds.width = this._texture.crop.width; - this._bounds.height = this._texture.crop.height; + this._bounds.x = -this._texture.orig.width * this.anchor.x; + this._bounds.y = -this._texture.orig.height * this.anchor.y; + this._bounds.width = this._texture.orig.width; + this._bounds.height = this._texture.orig.height; return this._bounds; }; @@ -387,8 +387,8 @@ { this.worldTransform.applyInverse(point, tempPoint); - var width = this._texture.crop.width; - var height = this._texture.crop.height; + var width = this._texture.orig.width; + var height = this._texture.orig.height; var x1 = -width * this.anchor.x; var y1; diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index d95c745..17e5e7d 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -50,7 +50,7 @@ width = texture._frame.width, height = texture._frame.height; - if (texture.crop.width <= 0 || texture.crop.height <= 0) + if (texture.orig.width <= 0 || texture.orig.height <= 0) { return; } @@ -70,11 +70,11 @@ } if (texture.trim) { - dx = texture.trim.width/2 + texture.trim.x - sprite.anchor.x * texture.crop.width; - dy = texture.trim.height/2 + texture.trim.y - sprite.anchor.y * texture.crop.height; + dx = texture.trim.width/2 + texture.trim.x - sprite.anchor.x * texture.orig.width; + dy = texture.trim.height/2 + texture.trim.y - sprite.anchor.y * texture.orig.height; } else { - dx = (0.5 - sprite.anchor.x) * texture.crop.width; - dy = (0.5 - sprite.anchor.y) * texture.crop.height; + dx = (0.5 - sprite.anchor.x) * texture.orig.width; + dy = (0.5 - sprite.anchor.y) * texture.orig.height; } if(texture.rotate) { wt.copy(canvasRenderWorldTransform); diff --git a/src/core/text/Text.js b/src/core/text/Text.js index a74fe9b..ca9d118 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -437,8 +437,8 @@ texture.baseTexture.width = this.canvas.width / this.resolution; texture.baseTexture.height = this.canvas.height / this.resolution; - texture.crop.width = texture._frame.width = this.canvas.width / this.resolution; - texture.crop.height = texture._frame.height = this.canvas.height / this.resolution; + texture.orig.width = texture._frame.width = this.canvas.width / this.resolution; + texture.orig.height = texture._frame.height = this.canvas.height / this.resolution; texture.trim.x = 0; texture.trim.y = -style.padding; diff --git a/README.md b/README.md index edc54ab..2243ce5 100644 --- a/README.md +++ b/README.md @@ -1,11 +1,10 @@ Pixi.js — A 2D JavaScript Renderer ============= -![pixi.js logo](http://www.goodboydigital.com/pixijs/pixi_v3_github-pad.png) +![pixi.js logo](http://www.goodboydigital.com/pixijs/pixiV4_wide_full.jpg) -[![projects](http://www.pixijs.com/wp-content/uploads/2013/05/headerPanel_projects-898x342.jpg)](http://www.pixijs.com/projects/) -## Pixi.js ## + [![Inline docs](http://inch-ci.org/github/GoodBoyDigital/pixi.js.svg?branch=dev)](http://inch-ci.org/github/GoodBoyDigital/pixi.js) [![Build Status](https://travis-ci.org/pixijs/pixi.js.svg?branch=dev)](https://travis-ci.org/pixijs/pixi.js) @@ -14,27 +13,6 @@ across all devices. The Pixi renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL. Also, it's fast. Really fast. -###Unlock the power of your creativity with Pixi.js and focalize your attention to build richer content in HTML5 and plain Javascript - -Are you a dreamer, a designer, an artist or just an ordinary person? Would you like to build an amazing game? Are you confortable with Javascript? If your answer is *yes*, you are in the right place! - -![Creativity](Pixi_mini.jpg) - -Pixi.js comes with a solid and easy to use [API](http://pixijs.github.io/docs). One of its key features is how it simplifies the use of WebGL, masking its complexity and allowing you to spend more time creating amazing things with **less code**. With Pixi.js you won't have to struggle with the OpenGL's shading language, Matrix computation and Vertex buffers. - -You still don't believe it? Look at the WebGL's [prerequisites](https://www.khronos.org/webgl/wiki/Getting_Started): - -> WebGL is a low-level API, so it's not for the faint of heart. OpenGL's shading language, GLSL, is itself an entire programming environment. As a result, even simple things in WebGL take quite a bit of code. You have to load, compile, and link shaders, set up the variables to be passed in to the shaders, and also perform matrix math to animate shapes. Basic areas you'll need to be familiar with include: - -> * GLSL, the shading language used by OpenGL and WebGL -* Matrix computation to set up transformations -* Vertex buffers to hold data about vertex positions, normals, colors, and textures (?) - -Use Pixi.js on your next project, all the benefits of WebGL with none of the hassle! - -###Build the next must-have cross platform app with Pixi.js - - If you want to keep up to date with the latest pixi.js news then feel free to follow us on twitter ([@doormat23](https://twitter.com/doormat23), and [@rolnaaba](https://twitter.com/rolnaaba)) and we will keep you posted! You can also check back on [our site](http://www.goodboydigital.com/blog) @@ -42,6 +20,16 @@ **Your support helps us make Pixi.js even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** +[![projects](http://www.pixijs.com/wp-content/uploads/2013/05/headerPanel_projects-898x342.jpg)](http://www.pixijs.com/projects/) + +### What to Use Pixi.js for and When to Use It + +Pixi.js is a rendering library that will allow you to create rich, interactive graphics, cross platform applications, and games without having to dive into the WebGL API or deal with browser and device compatibility. + +Pixi.js has full [WebGL](https://en.wikipedia.org/wiki/WebGL) support and seamlessly falls back to HTML5's [canvas](https://en.wikipedia.org/wiki/Canvas_element) if needed. As a framework, Pixi.js is a fantastic tool for authoring interactive content, *especially with the move away from Adobe Flash in recent years*. Use it for your graphics rich, interactive websites, applications, and HTML5 games. Out of the box cross-platform compatibility and graceful degredation mean you have less work to do and have more fun doing it! If you want to create polished and refined experiences relatively quickly, without delving into dense, low level code, all while avoiding the headaches of browser inconsistencies, then sprinkle your next project with some Pixi.js magic! + +**Boost your development and feel free to use your imagination!** + ### Demos ### - [WebGL Filters!](http://www.goodboydigital.com/pixijs/examples/15/indexAll.html) diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index aa61db4..f18c736 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -728,8 +728,8 @@ this._spriteRect.worldAlpha = this.worldAlpha; - Graphics._SPRITE_TEXTURE.crop.width = rect.width; - Graphics._SPRITE_TEXTURE.crop.height = rect.height; + Graphics._SPRITE_TEXTURE.frame.width = rect.width; + Graphics._SPRITE_TEXTURE.frame.height = rect.height; this._spriteRect.transform.worldTransform = this.transform.worldTransform; @@ -981,7 +981,7 @@ /** * Draws the given shape to this Graphics object. Can be any of Circle, Rectangle, Ellipse, Line or Polygon. * - * @param shape {PIXI.Circle|PIXI.Rectangle|PIXI.Ellipse|PIXI.Line|PIXI.Polygon} The shape object to draw. + * @param shape {PIXI.Circle|PIXI.Ellipse|PIXI.Polygon|PIXI.Rectangle|PIXI.RoundedRectangle} The shape object to draw. * @return {PIXI.GraphicsData} The generated GraphicsData object. */ Graphics.prototype.drawShape = function (shape) diff --git a/src/core/graphics/GraphicsData.js b/src/core/graphics/GraphicsData.js index 1d33508..bf9b044 100644 --- a/src/core/graphics/GraphicsData.js +++ b/src/core/graphics/GraphicsData.js @@ -52,7 +52,7 @@ this.fill = fill; /* - * @member {PIXI.Circle|PIXI.Rectangle|PIXI.Ellipse|PIXI.Line|PIXI.Polygon} The shape object to draw. + * @member {PIXI.Circle|PIXI.Ellipse|PIXI.Polygon|PIXI.Rectangle|PIXI.RoundedRectangle} The shape object to draw. */ this.shape = shape; diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index 96d52fd..f689c58 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -110,12 +110,12 @@ width: { get: function () { - return Math.abs(this.scale.x) * this.texture.crop.width; + return Math.abs(this.scale.x) * this.texture.orig.width; }, set: function (value) { var sign = utils.sign(this.scale.x) || 1; - this.scale.x = sign * value / this.texture.crop.width; + this.scale.x = sign * value / this.texture.orig.width; this._width = value; } }, @@ -129,12 +129,12 @@ height: { get: function () { - return Math.abs(this.scale.y) * this.texture.crop.height; + return Math.abs(this.scale.y) * this.texture.orig.height; }, set: function (value) { var sign = utils.sign(this.scale.y) || 1; - this.scale.y = sign * value / this.texture.crop.height; + this.scale.y = sign * value / this.texture.orig.height; this._height = value; } }, @@ -190,12 +190,12 @@ // so if _width is 0 then width was not set.. if (this._width) { - this.scale.x = utils.sign(this.scale.x) * this._width / this.texture.crop.width; + this.scale.x = utils.sign(this.scale.x) * this._width / this.texture.orig.width; } if (this._height) { - this.scale.y = utils.sign(this.scale.y) * this._height / this.texture.crop.height; + this.scale.y = utils.sign(this.scale.y) * this._height / this.texture.orig.height; } }; @@ -207,25 +207,25 @@ vertexData = this.vertexData, w0, w1, h0, h1, trim = texture.trim, - crop = texture.crop; + orig = texture.orig; if (trim) { // if the sprite is trimmed and is not a tilingsprite then we need to add the extra space before transforming the sprite coords.. - w1 = trim.x - this.anchor.x * crop.width; + w1 = trim.x - this.anchor.x * orig.width; w0 = w1 + trim.width; - h1 = trim.y - this.anchor.y * crop.height; + h1 = trim.y - this.anchor.y * orig.height; h0 = h1 + trim.height; } else { - w0 = (crop.width ) * (1-this.anchor.x); - w1 = (crop.width ) * -this.anchor.x; + w0 = (orig.width ) * (1-this.anchor.x); + w1 = (orig.width ) * -this.anchor.x; - h0 = crop.height * (1-this.anchor.y); - h1 = crop.height * -this.anchor.y; + h0 = orig.height * (1-this.anchor.y); + h1 = orig.height * -this.anchor.y; } // xy @@ -370,10 +370,10 @@ */ Sprite.prototype.getLocalBounds = function () { - this._bounds.x = -this._texture.crop.width * this.anchor.x; - this._bounds.y = -this._texture.crop.height * this.anchor.y; - this._bounds.width = this._texture.crop.width; - this._bounds.height = this._texture.crop.height; + this._bounds.x = -this._texture.orig.width * this.anchor.x; + this._bounds.y = -this._texture.orig.height * this.anchor.y; + this._bounds.width = this._texture.orig.width; + this._bounds.height = this._texture.orig.height; return this._bounds; }; @@ -387,8 +387,8 @@ { this.worldTransform.applyInverse(point, tempPoint); - var width = this._texture.crop.width; - var height = this._texture.crop.height; + var width = this._texture.orig.width; + var height = this._texture.orig.height; var x1 = -width * this.anchor.x; var y1; diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index d95c745..17e5e7d 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -50,7 +50,7 @@ width = texture._frame.width, height = texture._frame.height; - if (texture.crop.width <= 0 || texture.crop.height <= 0) + if (texture.orig.width <= 0 || texture.orig.height <= 0) { return; } @@ -70,11 +70,11 @@ } if (texture.trim) { - dx = texture.trim.width/2 + texture.trim.x - sprite.anchor.x * texture.crop.width; - dy = texture.trim.height/2 + texture.trim.y - sprite.anchor.y * texture.crop.height; + dx = texture.trim.width/2 + texture.trim.x - sprite.anchor.x * texture.orig.width; + dy = texture.trim.height/2 + texture.trim.y - sprite.anchor.y * texture.orig.height; } else { - dx = (0.5 - sprite.anchor.x) * texture.crop.width; - dy = (0.5 - sprite.anchor.y) * texture.crop.height; + dx = (0.5 - sprite.anchor.x) * texture.orig.width; + dy = (0.5 - sprite.anchor.y) * texture.orig.height; } if(texture.rotate) { wt.copy(canvasRenderWorldTransform); diff --git a/src/core/text/Text.js b/src/core/text/Text.js index a74fe9b..ca9d118 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -437,8 +437,8 @@ texture.baseTexture.width = this.canvas.width / this.resolution; texture.baseTexture.height = this.canvas.height / this.resolution; - texture.crop.width = texture._frame.width = this.canvas.width / this.resolution; - texture.crop.height = texture._frame.height = this.canvas.height / this.resolution; + texture.orig.width = texture._frame.width = this.canvas.width / this.resolution; + texture.orig.height = texture._frame.height = this.canvas.height / this.resolution; texture.trim.x = 0; texture.trim.y = -style.padding; diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index 00cc5c1..094a3c6 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -95,8 +95,8 @@ //TODO - could be not required.. this.valid = (width > 0 && height > 0); - this._frame.width = this.crop.width = width; - this._frame.height = this.crop.height = height; + this._frame.width = this.orig.width = width; + this._frame.height = this.orig.height = height; if (!doNotResizeBaseTexture) { diff --git a/README.md b/README.md index edc54ab..2243ce5 100644 --- a/README.md +++ b/README.md @@ -1,11 +1,10 @@ Pixi.js — A 2D JavaScript Renderer ============= -![pixi.js logo](http://www.goodboydigital.com/pixijs/pixi_v3_github-pad.png) +![pixi.js logo](http://www.goodboydigital.com/pixijs/pixiV4_wide_full.jpg) -[![projects](http://www.pixijs.com/wp-content/uploads/2013/05/headerPanel_projects-898x342.jpg)](http://www.pixijs.com/projects/) -## Pixi.js ## + [![Inline docs](http://inch-ci.org/github/GoodBoyDigital/pixi.js.svg?branch=dev)](http://inch-ci.org/github/GoodBoyDigital/pixi.js) [![Build Status](https://travis-ci.org/pixijs/pixi.js.svg?branch=dev)](https://travis-ci.org/pixijs/pixi.js) @@ -14,27 +13,6 @@ across all devices. The Pixi renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL. Also, it's fast. Really fast. -###Unlock the power of your creativity with Pixi.js and focalize your attention to build richer content in HTML5 and plain Javascript - -Are you a dreamer, a designer, an artist or just an ordinary person? Would you like to build an amazing game? Are you confortable with Javascript? If your answer is *yes*, you are in the right place! - -![Creativity](Pixi_mini.jpg) - -Pixi.js comes with a solid and easy to use [API](http://pixijs.github.io/docs). One of its key features is how it simplifies the use of WebGL, masking its complexity and allowing you to spend more time creating amazing things with **less code**. With Pixi.js you won't have to struggle with the OpenGL's shading language, Matrix computation and Vertex buffers. - -You still don't believe it? Look at the WebGL's [prerequisites](https://www.khronos.org/webgl/wiki/Getting_Started): - -> WebGL is a low-level API, so it's not for the faint of heart. OpenGL's shading language, GLSL, is itself an entire programming environment. As a result, even simple things in WebGL take quite a bit of code. You have to load, compile, and link shaders, set up the variables to be passed in to the shaders, and also perform matrix math to animate shapes. Basic areas you'll need to be familiar with include: - -> * GLSL, the shading language used by OpenGL and WebGL -* Matrix computation to set up transformations -* Vertex buffers to hold data about vertex positions, normals, colors, and textures (?) - -Use Pixi.js on your next project, all the benefits of WebGL with none of the hassle! - -###Build the next must-have cross platform app with Pixi.js - - If you want to keep up to date with the latest pixi.js news then feel free to follow us on twitter ([@doormat23](https://twitter.com/doormat23), and [@rolnaaba](https://twitter.com/rolnaaba)) and we will keep you posted! You can also check back on [our site](http://www.goodboydigital.com/blog) @@ -42,6 +20,16 @@ **Your support helps us make Pixi.js even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** +[![projects](http://www.pixijs.com/wp-content/uploads/2013/05/headerPanel_projects-898x342.jpg)](http://www.pixijs.com/projects/) + +### What to Use Pixi.js for and When to Use It + +Pixi.js is a rendering library that will allow you to create rich, interactive graphics, cross platform applications, and games without having to dive into the WebGL API or deal with browser and device compatibility. + +Pixi.js has full [WebGL](https://en.wikipedia.org/wiki/WebGL) support and seamlessly falls back to HTML5's [canvas](https://en.wikipedia.org/wiki/Canvas_element) if needed. As a framework, Pixi.js is a fantastic tool for authoring interactive content, *especially with the move away from Adobe Flash in recent years*. Use it for your graphics rich, interactive websites, applications, and HTML5 games. Out of the box cross-platform compatibility and graceful degredation mean you have less work to do and have more fun doing it! If you want to create polished and refined experiences relatively quickly, without delving into dense, low level code, all while avoiding the headaches of browser inconsistencies, then sprinkle your next project with some Pixi.js magic! + +**Boost your development and feel free to use your imagination!** + ### Demos ### - [WebGL Filters!](http://www.goodboydigital.com/pixijs/examples/15/indexAll.html) diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index aa61db4..f18c736 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -728,8 +728,8 @@ this._spriteRect.worldAlpha = this.worldAlpha; - Graphics._SPRITE_TEXTURE.crop.width = rect.width; - Graphics._SPRITE_TEXTURE.crop.height = rect.height; + Graphics._SPRITE_TEXTURE.frame.width = rect.width; + Graphics._SPRITE_TEXTURE.frame.height = rect.height; this._spriteRect.transform.worldTransform = this.transform.worldTransform; @@ -981,7 +981,7 @@ /** * Draws the given shape to this Graphics object. Can be any of Circle, Rectangle, Ellipse, Line or Polygon. * - * @param shape {PIXI.Circle|PIXI.Rectangle|PIXI.Ellipse|PIXI.Line|PIXI.Polygon} The shape object to draw. + * @param shape {PIXI.Circle|PIXI.Ellipse|PIXI.Polygon|PIXI.Rectangle|PIXI.RoundedRectangle} The shape object to draw. * @return {PIXI.GraphicsData} The generated GraphicsData object. */ Graphics.prototype.drawShape = function (shape) diff --git a/src/core/graphics/GraphicsData.js b/src/core/graphics/GraphicsData.js index 1d33508..bf9b044 100644 --- a/src/core/graphics/GraphicsData.js +++ b/src/core/graphics/GraphicsData.js @@ -52,7 +52,7 @@ this.fill = fill; /* - * @member {PIXI.Circle|PIXI.Rectangle|PIXI.Ellipse|PIXI.Line|PIXI.Polygon} The shape object to draw. + * @member {PIXI.Circle|PIXI.Ellipse|PIXI.Polygon|PIXI.Rectangle|PIXI.RoundedRectangle} The shape object to draw. */ this.shape = shape; diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index 96d52fd..f689c58 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -110,12 +110,12 @@ width: { get: function () { - return Math.abs(this.scale.x) * this.texture.crop.width; + return Math.abs(this.scale.x) * this.texture.orig.width; }, set: function (value) { var sign = utils.sign(this.scale.x) || 1; - this.scale.x = sign * value / this.texture.crop.width; + this.scale.x = sign * value / this.texture.orig.width; this._width = value; } }, @@ -129,12 +129,12 @@ height: { get: function () { - return Math.abs(this.scale.y) * this.texture.crop.height; + return Math.abs(this.scale.y) * this.texture.orig.height; }, set: function (value) { var sign = utils.sign(this.scale.y) || 1; - this.scale.y = sign * value / this.texture.crop.height; + this.scale.y = sign * value / this.texture.orig.height; this._height = value; } }, @@ -190,12 +190,12 @@ // so if _width is 0 then width was not set.. if (this._width) { - this.scale.x = utils.sign(this.scale.x) * this._width / this.texture.crop.width; + this.scale.x = utils.sign(this.scale.x) * this._width / this.texture.orig.width; } if (this._height) { - this.scale.y = utils.sign(this.scale.y) * this._height / this.texture.crop.height; + this.scale.y = utils.sign(this.scale.y) * this._height / this.texture.orig.height; } }; @@ -207,25 +207,25 @@ vertexData = this.vertexData, w0, w1, h0, h1, trim = texture.trim, - crop = texture.crop; + orig = texture.orig; if (trim) { // if the sprite is trimmed and is not a tilingsprite then we need to add the extra space before transforming the sprite coords.. - w1 = trim.x - this.anchor.x * crop.width; + w1 = trim.x - this.anchor.x * orig.width; w0 = w1 + trim.width; - h1 = trim.y - this.anchor.y * crop.height; + h1 = trim.y - this.anchor.y * orig.height; h0 = h1 + trim.height; } else { - w0 = (crop.width ) * (1-this.anchor.x); - w1 = (crop.width ) * -this.anchor.x; + w0 = (orig.width ) * (1-this.anchor.x); + w1 = (orig.width ) * -this.anchor.x; - h0 = crop.height * (1-this.anchor.y); - h1 = crop.height * -this.anchor.y; + h0 = orig.height * (1-this.anchor.y); + h1 = orig.height * -this.anchor.y; } // xy @@ -370,10 +370,10 @@ */ Sprite.prototype.getLocalBounds = function () { - this._bounds.x = -this._texture.crop.width * this.anchor.x; - this._bounds.y = -this._texture.crop.height * this.anchor.y; - this._bounds.width = this._texture.crop.width; - this._bounds.height = this._texture.crop.height; + this._bounds.x = -this._texture.orig.width * this.anchor.x; + this._bounds.y = -this._texture.orig.height * this.anchor.y; + this._bounds.width = this._texture.orig.width; + this._bounds.height = this._texture.orig.height; return this._bounds; }; @@ -387,8 +387,8 @@ { this.worldTransform.applyInverse(point, tempPoint); - var width = this._texture.crop.width; - var height = this._texture.crop.height; + var width = this._texture.orig.width; + var height = this._texture.orig.height; var x1 = -width * this.anchor.x; var y1; diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index d95c745..17e5e7d 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -50,7 +50,7 @@ width = texture._frame.width, height = texture._frame.height; - if (texture.crop.width <= 0 || texture.crop.height <= 0) + if (texture.orig.width <= 0 || texture.orig.height <= 0) { return; } @@ -70,11 +70,11 @@ } if (texture.trim) { - dx = texture.trim.width/2 + texture.trim.x - sprite.anchor.x * texture.crop.width; - dy = texture.trim.height/2 + texture.trim.y - sprite.anchor.y * texture.crop.height; + dx = texture.trim.width/2 + texture.trim.x - sprite.anchor.x * texture.orig.width; + dy = texture.trim.height/2 + texture.trim.y - sprite.anchor.y * texture.orig.height; } else { - dx = (0.5 - sprite.anchor.x) * texture.crop.width; - dy = (0.5 - sprite.anchor.y) * texture.crop.height; + dx = (0.5 - sprite.anchor.x) * texture.orig.width; + dy = (0.5 - sprite.anchor.y) * texture.orig.height; } if(texture.rotate) { wt.copy(canvasRenderWorldTransform); diff --git a/src/core/text/Text.js b/src/core/text/Text.js index a74fe9b..ca9d118 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -437,8 +437,8 @@ texture.baseTexture.width = this.canvas.width / this.resolution; texture.baseTexture.height = this.canvas.height / this.resolution; - texture.crop.width = texture._frame.width = this.canvas.width / this.resolution; - texture.crop.height = texture._frame.height = this.canvas.height / this.resolution; + texture.orig.width = texture._frame.width = this.canvas.width / this.resolution; + texture.orig.height = texture._frame.height = this.canvas.height / this.resolution; texture.trim.x = 0; texture.trim.y = -style.padding; diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index 00cc5c1..094a3c6 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -95,8 +95,8 @@ //TODO - could be not required.. this.valid = (width > 0 && height > 0); - this._frame.width = this.crop.width = width; - this._frame.height = this.crop.height = height; + this._frame.width = this.orig.width = width; + this._frame.height = this.orig.height = height; if (!doNotResizeBaseTexture) { diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 2b8cfb5..b40d530 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -21,11 +21,11 @@ * @memberof PIXI * @param baseTexture {PIXI.BaseTexture} The base texture source to create the texture from * @param [frame] {PIXI.Rectangle} The rectangle frame of the texture to show - * @param [crop] {PIXI.Rectangle} The area of original texture + * @param [orig] {PIXI.Rectangle} The area of original texture * @param [trim] {PIXI.Rectangle} Trimmed rectangle of original texture * @param [rotate] {number} indicates how the texture was rotated by texture packer. See {@link PIXI.GroupD8} */ -function Texture(baseTexture, frame, crop, trim, rotate) +function Texture(baseTexture, frame, orig, trim, rotate) { EventEmitter.call(this); @@ -96,7 +96,7 @@ * * @member {PIXI.Rectangle} */ - this.crop = crop || frame;//new math.Rectangle(0, 0, 1, 1); + this.orig = orig || frame;//new math.Rectangle(0, 0, 1, 1); this._rotate = +(rotate || 0); @@ -166,7 +166,7 @@ if (!this.trim) { - this.crop = frame; + this.orig = frame; } if (this.valid) @@ -206,7 +206,7 @@ */ width: { get: function() { - return this.crop ? this.crop.width : 0; + return this.orig ? this.orig.width : 0; } }, @@ -217,7 +217,7 @@ */ height: { get: function() { - return this.crop ? this.crop.height : 0; + return this.orig ? this.orig.height : 0; } } }); @@ -288,7 +288,7 @@ this._frame = null; this._uvs = null; this.trim = null; - this.crop = null; + this.orig = null; this.valid = false; @@ -303,7 +303,7 @@ */ Texture.prototype.clone = function () { - return new Texture(this.baseTexture, this.frame, this.crop, this.trim, this.rotate); + return new Texture(this.baseTexture, this.frame, this.orig, this.trim, this.rotate); }; /** diff --git a/README.md b/README.md index edc54ab..2243ce5 100644 --- a/README.md +++ b/README.md @@ -1,11 +1,10 @@ Pixi.js — A 2D JavaScript Renderer ============= -![pixi.js logo](http://www.goodboydigital.com/pixijs/pixi_v3_github-pad.png) +![pixi.js logo](http://www.goodboydigital.com/pixijs/pixiV4_wide_full.jpg) -[![projects](http://www.pixijs.com/wp-content/uploads/2013/05/headerPanel_projects-898x342.jpg)](http://www.pixijs.com/projects/) -## Pixi.js ## + [![Inline docs](http://inch-ci.org/github/GoodBoyDigital/pixi.js.svg?branch=dev)](http://inch-ci.org/github/GoodBoyDigital/pixi.js) [![Build Status](https://travis-ci.org/pixijs/pixi.js.svg?branch=dev)](https://travis-ci.org/pixijs/pixi.js) @@ -14,27 +13,6 @@ across all devices. The Pixi renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL. Also, it's fast. Really fast. -###Unlock the power of your creativity with Pixi.js and focalize your attention to build richer content in HTML5 and plain Javascript - -Are you a dreamer, a designer, an artist or just an ordinary person? Would you like to build an amazing game? Are you confortable with Javascript? If your answer is *yes*, you are in the right place! - -![Creativity](Pixi_mini.jpg) - -Pixi.js comes with a solid and easy to use [API](http://pixijs.github.io/docs). One of its key features is how it simplifies the use of WebGL, masking its complexity and allowing you to spend more time creating amazing things with **less code**. With Pixi.js you won't have to struggle with the OpenGL's shading language, Matrix computation and Vertex buffers. - -You still don't believe it? Look at the WebGL's [prerequisites](https://www.khronos.org/webgl/wiki/Getting_Started): - -> WebGL is a low-level API, so it's not for the faint of heart. OpenGL's shading language, GLSL, is itself an entire programming environment. As a result, even simple things in WebGL take quite a bit of code. You have to load, compile, and link shaders, set up the variables to be passed in to the shaders, and also perform matrix math to animate shapes. Basic areas you'll need to be familiar with include: - -> * GLSL, the shading language used by OpenGL and WebGL -* Matrix computation to set up transformations -* Vertex buffers to hold data about vertex positions, normals, colors, and textures (?) - -Use Pixi.js on your next project, all the benefits of WebGL with none of the hassle! - -###Build the next must-have cross platform app with Pixi.js - - If you want to keep up to date with the latest pixi.js news then feel free to follow us on twitter ([@doormat23](https://twitter.com/doormat23), and [@rolnaaba](https://twitter.com/rolnaaba)) and we will keep you posted! You can also check back on [our site](http://www.goodboydigital.com/blog) @@ -42,6 +20,16 @@ **Your support helps us make Pixi.js even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** +[![projects](http://www.pixijs.com/wp-content/uploads/2013/05/headerPanel_projects-898x342.jpg)](http://www.pixijs.com/projects/) + +### What to Use Pixi.js for and When to Use It + +Pixi.js is a rendering library that will allow you to create rich, interactive graphics, cross platform applications, and games without having to dive into the WebGL API or deal with browser and device compatibility. + +Pixi.js has full [WebGL](https://en.wikipedia.org/wiki/WebGL) support and seamlessly falls back to HTML5's [canvas](https://en.wikipedia.org/wiki/Canvas_element) if needed. As a framework, Pixi.js is a fantastic tool for authoring interactive content, *especially with the move away from Adobe Flash in recent years*. Use it for your graphics rich, interactive websites, applications, and HTML5 games. Out of the box cross-platform compatibility and graceful degredation mean you have less work to do and have more fun doing it! If you want to create polished and refined experiences relatively quickly, without delving into dense, low level code, all while avoiding the headaches of browser inconsistencies, then sprinkle your next project with some Pixi.js magic! + +**Boost your development and feel free to use your imagination!** + ### Demos ### - [WebGL Filters!](http://www.goodboydigital.com/pixijs/examples/15/indexAll.html) diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index aa61db4..f18c736 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -728,8 +728,8 @@ this._spriteRect.worldAlpha = this.worldAlpha; - Graphics._SPRITE_TEXTURE.crop.width = rect.width; - Graphics._SPRITE_TEXTURE.crop.height = rect.height; + Graphics._SPRITE_TEXTURE.frame.width = rect.width; + Graphics._SPRITE_TEXTURE.frame.height = rect.height; this._spriteRect.transform.worldTransform = this.transform.worldTransform; @@ -981,7 +981,7 @@ /** * Draws the given shape to this Graphics object. Can be any of Circle, Rectangle, Ellipse, Line or Polygon. * - * @param shape {PIXI.Circle|PIXI.Rectangle|PIXI.Ellipse|PIXI.Line|PIXI.Polygon} The shape object to draw. + * @param shape {PIXI.Circle|PIXI.Ellipse|PIXI.Polygon|PIXI.Rectangle|PIXI.RoundedRectangle} The shape object to draw. * @return {PIXI.GraphicsData} The generated GraphicsData object. */ Graphics.prototype.drawShape = function (shape) diff --git a/src/core/graphics/GraphicsData.js b/src/core/graphics/GraphicsData.js index 1d33508..bf9b044 100644 --- a/src/core/graphics/GraphicsData.js +++ b/src/core/graphics/GraphicsData.js @@ -52,7 +52,7 @@ this.fill = fill; /* - * @member {PIXI.Circle|PIXI.Rectangle|PIXI.Ellipse|PIXI.Line|PIXI.Polygon} The shape object to draw. + * @member {PIXI.Circle|PIXI.Ellipse|PIXI.Polygon|PIXI.Rectangle|PIXI.RoundedRectangle} The shape object to draw. */ this.shape = shape; diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index 96d52fd..f689c58 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -110,12 +110,12 @@ width: { get: function () { - return Math.abs(this.scale.x) * this.texture.crop.width; + return Math.abs(this.scale.x) * this.texture.orig.width; }, set: function (value) { var sign = utils.sign(this.scale.x) || 1; - this.scale.x = sign * value / this.texture.crop.width; + this.scale.x = sign * value / this.texture.orig.width; this._width = value; } }, @@ -129,12 +129,12 @@ height: { get: function () { - return Math.abs(this.scale.y) * this.texture.crop.height; + return Math.abs(this.scale.y) * this.texture.orig.height; }, set: function (value) { var sign = utils.sign(this.scale.y) || 1; - this.scale.y = sign * value / this.texture.crop.height; + this.scale.y = sign * value / this.texture.orig.height; this._height = value; } }, @@ -190,12 +190,12 @@ // so if _width is 0 then width was not set.. if (this._width) { - this.scale.x = utils.sign(this.scale.x) * this._width / this.texture.crop.width; + this.scale.x = utils.sign(this.scale.x) * this._width / this.texture.orig.width; } if (this._height) { - this.scale.y = utils.sign(this.scale.y) * this._height / this.texture.crop.height; + this.scale.y = utils.sign(this.scale.y) * this._height / this.texture.orig.height; } }; @@ -207,25 +207,25 @@ vertexData = this.vertexData, w0, w1, h0, h1, trim = texture.trim, - crop = texture.crop; + orig = texture.orig; if (trim) { // if the sprite is trimmed and is not a tilingsprite then we need to add the extra space before transforming the sprite coords.. - w1 = trim.x - this.anchor.x * crop.width; + w1 = trim.x - this.anchor.x * orig.width; w0 = w1 + trim.width; - h1 = trim.y - this.anchor.y * crop.height; + h1 = trim.y - this.anchor.y * orig.height; h0 = h1 + trim.height; } else { - w0 = (crop.width ) * (1-this.anchor.x); - w1 = (crop.width ) * -this.anchor.x; + w0 = (orig.width ) * (1-this.anchor.x); + w1 = (orig.width ) * -this.anchor.x; - h0 = crop.height * (1-this.anchor.y); - h1 = crop.height * -this.anchor.y; + h0 = orig.height * (1-this.anchor.y); + h1 = orig.height * -this.anchor.y; } // xy @@ -370,10 +370,10 @@ */ Sprite.prototype.getLocalBounds = function () { - this._bounds.x = -this._texture.crop.width * this.anchor.x; - this._bounds.y = -this._texture.crop.height * this.anchor.y; - this._bounds.width = this._texture.crop.width; - this._bounds.height = this._texture.crop.height; + this._bounds.x = -this._texture.orig.width * this.anchor.x; + this._bounds.y = -this._texture.orig.height * this.anchor.y; + this._bounds.width = this._texture.orig.width; + this._bounds.height = this._texture.orig.height; return this._bounds; }; @@ -387,8 +387,8 @@ { this.worldTransform.applyInverse(point, tempPoint); - var width = this._texture.crop.width; - var height = this._texture.crop.height; + var width = this._texture.orig.width; + var height = this._texture.orig.height; var x1 = -width * this.anchor.x; var y1; diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index d95c745..17e5e7d 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -50,7 +50,7 @@ width = texture._frame.width, height = texture._frame.height; - if (texture.crop.width <= 0 || texture.crop.height <= 0) + if (texture.orig.width <= 0 || texture.orig.height <= 0) { return; } @@ -70,11 +70,11 @@ } if (texture.trim) { - dx = texture.trim.width/2 + texture.trim.x - sprite.anchor.x * texture.crop.width; - dy = texture.trim.height/2 + texture.trim.y - sprite.anchor.y * texture.crop.height; + dx = texture.trim.width/2 + texture.trim.x - sprite.anchor.x * texture.orig.width; + dy = texture.trim.height/2 + texture.trim.y - sprite.anchor.y * texture.orig.height; } else { - dx = (0.5 - sprite.anchor.x) * texture.crop.width; - dy = (0.5 - sprite.anchor.y) * texture.crop.height; + dx = (0.5 - sprite.anchor.x) * texture.orig.width; + dy = (0.5 - sprite.anchor.y) * texture.orig.height; } if(texture.rotate) { wt.copy(canvasRenderWorldTransform); diff --git a/src/core/text/Text.js b/src/core/text/Text.js index a74fe9b..ca9d118 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -437,8 +437,8 @@ texture.baseTexture.width = this.canvas.width / this.resolution; texture.baseTexture.height = this.canvas.height / this.resolution; - texture.crop.width = texture._frame.width = this.canvas.width / this.resolution; - texture.crop.height = texture._frame.height = this.canvas.height / this.resolution; + texture.orig.width = texture._frame.width = this.canvas.width / this.resolution; + texture.orig.height = texture._frame.height = this.canvas.height / this.resolution; texture.trim.x = 0; texture.trim.y = -style.padding; diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index 00cc5c1..094a3c6 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -95,8 +95,8 @@ //TODO - could be not required.. this.valid = (width > 0 && height > 0); - this._frame.width = this.crop.width = width; - this._frame.height = this.crop.height = height; + this._frame.width = this.orig.width = width; + this._frame.height = this.orig.height = height; if (!doNotResizeBaseTexture) { diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 2b8cfb5..b40d530 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -21,11 +21,11 @@ * @memberof PIXI * @param baseTexture {PIXI.BaseTexture} The base texture source to create the texture from * @param [frame] {PIXI.Rectangle} The rectangle frame of the texture to show - * @param [crop] {PIXI.Rectangle} The area of original texture + * @param [orig] {PIXI.Rectangle} The area of original texture * @param [trim] {PIXI.Rectangle} Trimmed rectangle of original texture * @param [rotate] {number} indicates how the texture was rotated by texture packer. See {@link PIXI.GroupD8} */ -function Texture(baseTexture, frame, crop, trim, rotate) +function Texture(baseTexture, frame, orig, trim, rotate) { EventEmitter.call(this); @@ -96,7 +96,7 @@ * * @member {PIXI.Rectangle} */ - this.crop = crop || frame;//new math.Rectangle(0, 0, 1, 1); + this.orig = orig || frame;//new math.Rectangle(0, 0, 1, 1); this._rotate = +(rotate || 0); @@ -166,7 +166,7 @@ if (!this.trim) { - this.crop = frame; + this.orig = frame; } if (this.valid) @@ -206,7 +206,7 @@ */ width: { get: function() { - return this.crop ? this.crop.width : 0; + return this.orig ? this.orig.width : 0; } }, @@ -217,7 +217,7 @@ */ height: { get: function() { - return this.crop ? this.crop.height : 0; + return this.orig ? this.orig.height : 0; } } }); @@ -288,7 +288,7 @@ this._frame = null; this._uvs = null; this.trim = null; - this.crop = null; + this.orig = null; this.valid = false; @@ -303,7 +303,7 @@ */ Texture.prototype.clone = function () { - return new Texture(this.baseTexture, this.frame, this.crop, this.trim, this.rotate); + return new Texture(this.baseTexture, this.frame, this.orig, this.trim, this.rotate); }; /** diff --git a/src/loaders/spritesheetParser.js b/src/loaders/spritesheetParser.js index 9a6e582..172644d 100644 --- a/src/loaders/spritesheetParser.js +++ b/src/loaders/spritesheetParser.js @@ -49,7 +49,7 @@ var frame = null; var trim = null; - var crop = new core.Rectangle(0, 0, frames[i].sourceSize.w / resolution, frames[i].sourceSize.h / resolution); + var orig = new core.Rectangle(0, 0, frames[i].sourceSize.w / resolution, frames[i].sourceSize.h / resolution); if (frames[i].rotated) { frame = new core.Rectangle(rect.x / resolution, rect.y / resolution, rect.h / resolution, rect.w / resolution); @@ -69,7 +69,7 @@ ); } - resource.textures[i] = new core.Texture(res.texture.baseTexture, frame, crop, trim, frames[i].rotated ? 2 : 0); + resource.textures[i] = new core.Texture(res.texture.baseTexture, frame, orig, trim, frames[i].rotated ? 2 : 0); // lets also add the frame to pixi's global cache for fromFrame and fromImage functions core.utils.TextureCache[i] = resource.textures[i]; diff --git a/README.md b/README.md index edc54ab..2243ce5 100644 --- a/README.md +++ b/README.md @@ -1,11 +1,10 @@ Pixi.js — A 2D JavaScript Renderer ============= -![pixi.js logo](http://www.goodboydigital.com/pixijs/pixi_v3_github-pad.png) +![pixi.js logo](http://www.goodboydigital.com/pixijs/pixiV4_wide_full.jpg) -[![projects](http://www.pixijs.com/wp-content/uploads/2013/05/headerPanel_projects-898x342.jpg)](http://www.pixijs.com/projects/) -## Pixi.js ## + [![Inline docs](http://inch-ci.org/github/GoodBoyDigital/pixi.js.svg?branch=dev)](http://inch-ci.org/github/GoodBoyDigital/pixi.js) [![Build Status](https://travis-ci.org/pixijs/pixi.js.svg?branch=dev)](https://travis-ci.org/pixijs/pixi.js) @@ -14,27 +13,6 @@ across all devices. The Pixi renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL. Also, it's fast. Really fast. -###Unlock the power of your creativity with Pixi.js and focalize your attention to build richer content in HTML5 and plain Javascript - -Are you a dreamer, a designer, an artist or just an ordinary person? Would you like to build an amazing game? Are you confortable with Javascript? If your answer is *yes*, you are in the right place! - -![Creativity](Pixi_mini.jpg) - -Pixi.js comes with a solid and easy to use [API](http://pixijs.github.io/docs). One of its key features is how it simplifies the use of WebGL, masking its complexity and allowing you to spend more time creating amazing things with **less code**. With Pixi.js you won't have to struggle with the OpenGL's shading language, Matrix computation and Vertex buffers. - -You still don't believe it? Look at the WebGL's [prerequisites](https://www.khronos.org/webgl/wiki/Getting_Started): - -> WebGL is a low-level API, so it's not for the faint of heart. OpenGL's shading language, GLSL, is itself an entire programming environment. As a result, even simple things in WebGL take quite a bit of code. You have to load, compile, and link shaders, set up the variables to be passed in to the shaders, and also perform matrix math to animate shapes. Basic areas you'll need to be familiar with include: - -> * GLSL, the shading language used by OpenGL and WebGL -* Matrix computation to set up transformations -* Vertex buffers to hold data about vertex positions, normals, colors, and textures (?) - -Use Pixi.js on your next project, all the benefits of WebGL with none of the hassle! - -###Build the next must-have cross platform app with Pixi.js - - If you want to keep up to date with the latest pixi.js news then feel free to follow us on twitter ([@doormat23](https://twitter.com/doormat23), and [@rolnaaba](https://twitter.com/rolnaaba)) and we will keep you posted! You can also check back on [our site](http://www.goodboydigital.com/blog) @@ -42,6 +20,16 @@ **Your support helps us make Pixi.js even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** +[![projects](http://www.pixijs.com/wp-content/uploads/2013/05/headerPanel_projects-898x342.jpg)](http://www.pixijs.com/projects/) + +### What to Use Pixi.js for and When to Use It + +Pixi.js is a rendering library that will allow you to create rich, interactive graphics, cross platform applications, and games without having to dive into the WebGL API or deal with browser and device compatibility. + +Pixi.js has full [WebGL](https://en.wikipedia.org/wiki/WebGL) support and seamlessly falls back to HTML5's [canvas](https://en.wikipedia.org/wiki/Canvas_element) if needed. As a framework, Pixi.js is a fantastic tool for authoring interactive content, *especially with the move away from Adobe Flash in recent years*. Use it for your graphics rich, interactive websites, applications, and HTML5 games. Out of the box cross-platform compatibility and graceful degredation mean you have less work to do and have more fun doing it! If you want to create polished and refined experiences relatively quickly, without delving into dense, low level code, all while avoiding the headaches of browser inconsistencies, then sprinkle your next project with some Pixi.js magic! + +**Boost your development and feel free to use your imagination!** + ### Demos ### - [WebGL Filters!](http://www.goodboydigital.com/pixijs/examples/15/indexAll.html) diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index aa61db4..f18c736 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -728,8 +728,8 @@ this._spriteRect.worldAlpha = this.worldAlpha; - Graphics._SPRITE_TEXTURE.crop.width = rect.width; - Graphics._SPRITE_TEXTURE.crop.height = rect.height; + Graphics._SPRITE_TEXTURE.frame.width = rect.width; + Graphics._SPRITE_TEXTURE.frame.height = rect.height; this._spriteRect.transform.worldTransform = this.transform.worldTransform; @@ -981,7 +981,7 @@ /** * Draws the given shape to this Graphics object. Can be any of Circle, Rectangle, Ellipse, Line or Polygon. * - * @param shape {PIXI.Circle|PIXI.Rectangle|PIXI.Ellipse|PIXI.Line|PIXI.Polygon} The shape object to draw. + * @param shape {PIXI.Circle|PIXI.Ellipse|PIXI.Polygon|PIXI.Rectangle|PIXI.RoundedRectangle} The shape object to draw. * @return {PIXI.GraphicsData} The generated GraphicsData object. */ Graphics.prototype.drawShape = function (shape) diff --git a/src/core/graphics/GraphicsData.js b/src/core/graphics/GraphicsData.js index 1d33508..bf9b044 100644 --- a/src/core/graphics/GraphicsData.js +++ b/src/core/graphics/GraphicsData.js @@ -52,7 +52,7 @@ this.fill = fill; /* - * @member {PIXI.Circle|PIXI.Rectangle|PIXI.Ellipse|PIXI.Line|PIXI.Polygon} The shape object to draw. + * @member {PIXI.Circle|PIXI.Ellipse|PIXI.Polygon|PIXI.Rectangle|PIXI.RoundedRectangle} The shape object to draw. */ this.shape = shape; diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index 96d52fd..f689c58 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -110,12 +110,12 @@ width: { get: function () { - return Math.abs(this.scale.x) * this.texture.crop.width; + return Math.abs(this.scale.x) * this.texture.orig.width; }, set: function (value) { var sign = utils.sign(this.scale.x) || 1; - this.scale.x = sign * value / this.texture.crop.width; + this.scale.x = sign * value / this.texture.orig.width; this._width = value; } }, @@ -129,12 +129,12 @@ height: { get: function () { - return Math.abs(this.scale.y) * this.texture.crop.height; + return Math.abs(this.scale.y) * this.texture.orig.height; }, set: function (value) { var sign = utils.sign(this.scale.y) || 1; - this.scale.y = sign * value / this.texture.crop.height; + this.scale.y = sign * value / this.texture.orig.height; this._height = value; } }, @@ -190,12 +190,12 @@ // so if _width is 0 then width was not set.. if (this._width) { - this.scale.x = utils.sign(this.scale.x) * this._width / this.texture.crop.width; + this.scale.x = utils.sign(this.scale.x) * this._width / this.texture.orig.width; } if (this._height) { - this.scale.y = utils.sign(this.scale.y) * this._height / this.texture.crop.height; + this.scale.y = utils.sign(this.scale.y) * this._height / this.texture.orig.height; } }; @@ -207,25 +207,25 @@ vertexData = this.vertexData, w0, w1, h0, h1, trim = texture.trim, - crop = texture.crop; + orig = texture.orig; if (trim) { // if the sprite is trimmed and is not a tilingsprite then we need to add the extra space before transforming the sprite coords.. - w1 = trim.x - this.anchor.x * crop.width; + w1 = trim.x - this.anchor.x * orig.width; w0 = w1 + trim.width; - h1 = trim.y - this.anchor.y * crop.height; + h1 = trim.y - this.anchor.y * orig.height; h0 = h1 + trim.height; } else { - w0 = (crop.width ) * (1-this.anchor.x); - w1 = (crop.width ) * -this.anchor.x; + w0 = (orig.width ) * (1-this.anchor.x); + w1 = (orig.width ) * -this.anchor.x; - h0 = crop.height * (1-this.anchor.y); - h1 = crop.height * -this.anchor.y; + h0 = orig.height * (1-this.anchor.y); + h1 = orig.height * -this.anchor.y; } // xy @@ -370,10 +370,10 @@ */ Sprite.prototype.getLocalBounds = function () { - this._bounds.x = -this._texture.crop.width * this.anchor.x; - this._bounds.y = -this._texture.crop.height * this.anchor.y; - this._bounds.width = this._texture.crop.width; - this._bounds.height = this._texture.crop.height; + this._bounds.x = -this._texture.orig.width * this.anchor.x; + this._bounds.y = -this._texture.orig.height * this.anchor.y; + this._bounds.width = this._texture.orig.width; + this._bounds.height = this._texture.orig.height; return this._bounds; }; @@ -387,8 +387,8 @@ { this.worldTransform.applyInverse(point, tempPoint); - var width = this._texture.crop.width; - var height = this._texture.crop.height; + var width = this._texture.orig.width; + var height = this._texture.orig.height; var x1 = -width * this.anchor.x; var y1; diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index d95c745..17e5e7d 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -50,7 +50,7 @@ width = texture._frame.width, height = texture._frame.height; - if (texture.crop.width <= 0 || texture.crop.height <= 0) + if (texture.orig.width <= 0 || texture.orig.height <= 0) { return; } @@ -70,11 +70,11 @@ } if (texture.trim) { - dx = texture.trim.width/2 + texture.trim.x - sprite.anchor.x * texture.crop.width; - dy = texture.trim.height/2 + texture.trim.y - sprite.anchor.y * texture.crop.height; + dx = texture.trim.width/2 + texture.trim.x - sprite.anchor.x * texture.orig.width; + dy = texture.trim.height/2 + texture.trim.y - sprite.anchor.y * texture.orig.height; } else { - dx = (0.5 - sprite.anchor.x) * texture.crop.width; - dy = (0.5 - sprite.anchor.y) * texture.crop.height; + dx = (0.5 - sprite.anchor.x) * texture.orig.width; + dy = (0.5 - sprite.anchor.y) * texture.orig.height; } if(texture.rotate) { wt.copy(canvasRenderWorldTransform); diff --git a/src/core/text/Text.js b/src/core/text/Text.js index a74fe9b..ca9d118 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -437,8 +437,8 @@ texture.baseTexture.width = this.canvas.width / this.resolution; texture.baseTexture.height = this.canvas.height / this.resolution; - texture.crop.width = texture._frame.width = this.canvas.width / this.resolution; - texture.crop.height = texture._frame.height = this.canvas.height / this.resolution; + texture.orig.width = texture._frame.width = this.canvas.width / this.resolution; + texture.orig.height = texture._frame.height = this.canvas.height / this.resolution; texture.trim.x = 0; texture.trim.y = -style.padding; diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index 00cc5c1..094a3c6 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -95,8 +95,8 @@ //TODO - could be not required.. this.valid = (width > 0 && height > 0); - this._frame.width = this.crop.width = width; - this._frame.height = this.crop.height = height; + this._frame.width = this.orig.width = width; + this._frame.height = this.orig.height = height; if (!doNotResizeBaseTexture) { diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 2b8cfb5..b40d530 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -21,11 +21,11 @@ * @memberof PIXI * @param baseTexture {PIXI.BaseTexture} The base texture source to create the texture from * @param [frame] {PIXI.Rectangle} The rectangle frame of the texture to show - * @param [crop] {PIXI.Rectangle} The area of original texture + * @param [orig] {PIXI.Rectangle} The area of original texture * @param [trim] {PIXI.Rectangle} Trimmed rectangle of original texture * @param [rotate] {number} indicates how the texture was rotated by texture packer. See {@link PIXI.GroupD8} */ -function Texture(baseTexture, frame, crop, trim, rotate) +function Texture(baseTexture, frame, orig, trim, rotate) { EventEmitter.call(this); @@ -96,7 +96,7 @@ * * @member {PIXI.Rectangle} */ - this.crop = crop || frame;//new math.Rectangle(0, 0, 1, 1); + this.orig = orig || frame;//new math.Rectangle(0, 0, 1, 1); this._rotate = +(rotate || 0); @@ -166,7 +166,7 @@ if (!this.trim) { - this.crop = frame; + this.orig = frame; } if (this.valid) @@ -206,7 +206,7 @@ */ width: { get: function() { - return this.crop ? this.crop.width : 0; + return this.orig ? this.orig.width : 0; } }, @@ -217,7 +217,7 @@ */ height: { get: function() { - return this.crop ? this.crop.height : 0; + return this.orig ? this.orig.height : 0; } } }); @@ -288,7 +288,7 @@ this._frame = null; this._uvs = null; this.trim = null; - this.crop = null; + this.orig = null; this.valid = false; @@ -303,7 +303,7 @@ */ Texture.prototype.clone = function () { - return new Texture(this.baseTexture, this.frame, this.crop, this.trim, this.rotate); + return new Texture(this.baseTexture, this.frame, this.orig, this.trim, this.rotate); }; /** diff --git a/src/loaders/spritesheetParser.js b/src/loaders/spritesheetParser.js index 9a6e582..172644d 100644 --- a/src/loaders/spritesheetParser.js +++ b/src/loaders/spritesheetParser.js @@ -49,7 +49,7 @@ var frame = null; var trim = null; - var crop = new core.Rectangle(0, 0, frames[i].sourceSize.w / resolution, frames[i].sourceSize.h / resolution); + var orig = new core.Rectangle(0, 0, frames[i].sourceSize.w / resolution, frames[i].sourceSize.h / resolution); if (frames[i].rotated) { frame = new core.Rectangle(rect.x / resolution, rect.y / resolution, rect.h / resolution, rect.w / resolution); @@ -69,7 +69,7 @@ ); } - resource.textures[i] = new core.Texture(res.texture.baseTexture, frame, crop, trim, frames[i].rotated ? 2 : 0); + resource.textures[i] = new core.Texture(res.texture.baseTexture, frame, orig, trim, frames[i].rotated ? 2 : 0); // lets also add the frame to pixi's global cache for fromFrame and fromImage functions core.utils.TextureCache[i] = resource.textures[i]; diff --git a/src/particles/webgl/ParticleRenderer.js b/src/particles/webgl/ParticleRenderer.js index 5498f14..15b35b2 100644 --- a/src/particles/webgl/ParticleRenderer.js +++ b/src/particles/webgl/ParticleRenderer.js @@ -228,7 +228,7 @@ var sprite, texture, trim, - crop, + orig, sx, sy, w0, w1, h0, h1; @@ -240,25 +240,25 @@ sx = sprite.scale.x; sy = sprite.scale.y; trim = texture.trim; - crop = texture.crop; + orig = texture.orig; if (trim) { // if the sprite is trimmed and is not a tilingsprite then we need to add the extra space before transforming the sprite coords.. - w1 = trim.x - sprite.anchor.x * crop.width; + w1 = trim.x - sprite.anchor.x * orig.width; w0 = w1 + trim.width; - h1 = trim.y - sprite.anchor.y * crop.height; + h1 = trim.y - sprite.anchor.y * orig.height; h0 = h1 + trim.height; } else { - w0 = (crop.width ) * (1-sprite.anchor.x); - w1 = (crop.width ) * -sprite.anchor.x; + w0 = (orig.width ) * (1-sprite.anchor.x); + w1 = (orig.width ) * -sprite.anchor.x; - h0 = crop.height * (1-sprite.anchor.y); - h1 = crop.height * -sprite.anchor.y; + h0 = orig.height * (1-sprite.anchor.y); + h1 = orig.height * -sprite.anchor.y; } array[offset] = w1 * sx;